Repository: provectus/kafka-ui
Issue: Make broker table row clickable
Labels: type/enhancement
good first issue
scope/frontend
status/accepted

It's not convenient to press on the number, let's make the whole row clickable.
<img width="1078" alt="image" src="https://user-images.githubusercontent.com/1494347/172599358-b2a52a90-8e67-40e0-ae95-171dbf94845f.png">


Issue comments:

Pull request review comments:
It should be in a ..styled.ts file
replaced
Please check if we can use our smart table here
I checked. Yes, we can use Smart Table, but for this we will have to rewrite the entire component. Plus, it will be necessary to add some more code - for example, to describe the state for the table. Should I do it?

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.style.ts b/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.style.ts
new file mode 100644
index 00000000000..f5f83733331
--- /dev/null
+++ b/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.style.ts
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const ClickableRow = styled.tr`
+  cursor: pointer;
+`;
diff --git a/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx b/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
index 36e36368c3a..6423891f421 100644
--- a/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ClusterName } from 'redux/interfaces';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useNavigate } from 'react-router-dom';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 import { Table } from 'components/common/table/Table/Table.styled';
 import PageHeading from 'components/common/PageHeading/PageHeading';
@@ -10,7 +10,10 @@ import useAppParams from 'lib/hooks/useAppParams';
 import useBrokers from 'lib/hooks/useBrokers';
 import useClusterStats from 'lib/hooks/useClusterStats';
 
+import { ClickableRow } from './BrokersList.style';
+
 const BrokersList: React.FC = () => {
+  const navigate = useNavigate();
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
   const { data: clusterStats } = useClusterStats(clusterName);
   const { data: brokers } = useBrokers(clusterName);
@@ -58,7 +61,6 @@ const BrokersList: React.FC = () => {
               onlinePartitionCount
             )}
             <Metrics.LightText>
-              {' '}
               of {(onlinePartitionCount || 0) + (offlinePartitionCount || 0)}
             </Metrics.LightText>
           </Metrics.Indicator>
@@ -114,8 +116,12 @@ const BrokersList: React.FC = () => {
             diskUsage.length !== 0 &&
             diskUsage.map(({ brokerId, segmentSize, segmentCount }) => {
               const brokerItem = brokers?.find(({ id }) => id === brokerId);
+
               return (
-                <tr key={brokerId}>
+                <ClickableRow
+                  key={brokerId}
+                  onClick={() => navigate(`${brokerId}`)}
+                >
                   <td>
                     <NavLink to={`${brokerId}`} role="link">
                       {brokerId}
@@ -127,7 +133,7 @@ const BrokersList: React.FC = () => {
                   <td>{segmentCount}</td>
                   <td>{brokerItem?.port}</td>
                   <td>{brokerItem?.host}</td>
-                </tr>
+                </ClickableRow>
               );
             })}
         </tbody>
diff --git a/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx b/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx
index 437cc44cd4c..94ffa0b77af 100644
--- a/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx
@@ -9,6 +9,14 @@ import {
   brokersPayload,
   clusterStatsPayload,
 } from 'components/Brokers/__test__/fixtures';
+import userEvent from '@testing-library/user-event';
+
+const mockedUsedNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockedUsedNavigate,
+}));
 
 describe('BrokersList Component', () => {
   afterEach(() => fetchMock.reset());
@@ -53,6 +61,22 @@ describe('BrokersList Component', () => {
       expect(rows.length).toEqual(3);
     });
 
+    it('opens broker when row clicked', async () => {
+      const fetchStatsMock = fetchMock.get(fetchStatsUrl, clusterStatsPayload);
+      await act(() => {
+        renderComponent();
+      });
+      await waitFor(() => expect(fetchStatsMock.called()).toBeTruthy());
+      await act(() => {
+        userEvent.click(screen.getByRole('cell', { name: '0' }));
+      });
+
+      await waitFor(() => {
+        expect(mockedUsedNavigate).toBeCalled();
+        expect(mockedUsedNavigate).toBeCalledWith('0');
+      });
+    });
+
     it('shows warning when offlinePartitionCount > 0', async () => {
       const fetchStatsMock = fetchMock.getOnce(fetchStatsUrl, {
         ...clusterStatsPayload,
@@ -93,6 +117,7 @@ describe('BrokersList Component', () => {
       expect(onlineWidgetDef).toBeInTheDocument();
       expect(onlineWidget).toBeInTheDocument();
     });
+
     it('shows right count when inSyncReplicasCount: undefined outOfSyncReplicasCount: 1', async () => {
       const fetchStatsMock = fetchMock.getOnce(fetchStatsUrl, {
         ...clusterStatsPayload,


Test patch: