Repository: provectus/kafka-ui
Issue: Migrate Dashboard table to the new version on table components
Labels: good first issue
scope/frontend
type/refactoring

### Describe the solution you'd like
Migrate `src/components/Dashboard/ClustersWidget/ClustersWidget.tsx` to new version of tables  `src/components/common/NewTable/Table.tsx`

### Additional context
Go to Dasboard




Issue comments:

Pull request review comments:
I don't like the approach when we create toipc link component. Let's try to create universal component where we will send `to` as a property 
Not sure why we need to remove this test case
let's call it LinkCell and update all the existing tables with same link components
All the link colours must be the same
```suggestion
    <NavLink to={to} title={value} onClick={handleClick}>
```
```suggestion
           
```

Patch that resolved the issue:
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 9f63be31c29..54bdcef5ff8 100644
--- a/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
@@ -42,10 +42,19 @@ const BrokersList: React.FC = () => {
       };
     });
   }, [diskUsage, brokers]);
-
   const columns = React.useMemo<ColumnDef<typeof rows>[]>(
     () => [
-      { header: 'Broker ID', accessorKey: 'brokerId', cell: LinkCell },
+      {
+        header: 'Broker ID',
+        accessorKey: 'brokerId',
+        // eslint-disable-next-line react/no-unstable-nested-components
+        cell: ({ getValue }) => (
+          <LinkCell
+            value={`${getValue<string | number>()}`}
+            to={encodeURIComponent(`${getValue<string | number>()}`)}
+          />
+        ),
+      },
       { header: 'Segment Size', accessorKey: 'size', cell: SizeCell },
       { header: 'Segment Count', accessorKey: 'count' },
       { header: 'Port', accessorKey: 'port' },
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx
index 89be57d6392..c7df01b5e95 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx
@@ -49,7 +49,13 @@ const List: React.FC<Props> = ({ consumerGroups, totalPages }) => {
         id: ConsumerGroupOrdering.NAME,
         header: 'Group ID',
         accessorKey: 'groupId',
-        cell: LinkCell,
+        // eslint-disable-next-line react/no-unstable-nested-components
+        cell: ({ getValue }) => (
+          <LinkCell
+            value={`${getValue<string | number>()}`}
+            to={encodeURIComponent(`${getValue<string | number>()}`)}
+          />
+        ),
       },
       {
         id: ConsumerGroupOrdering.MEMBERS,
diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClusterName.tsx b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClusterName.tsx
new file mode 100644
index 00000000000..52702c348a7
--- /dev/null
+++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClusterName.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { CellContext } from '@tanstack/react-table';
+import { Tag } from 'components/common/Tag/Tag.styled';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ClusterName: React.FC<CellContext<any, unknown>> = ({ row }) => {
+  return (
+    <>
+      {row.original.readOnly && <Tag color="blue">readonly</Tag>}
+      {row.original.name}
+    </>
+  );
+};
+
+export default ClusterName;
diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx
index 7e303c98763..0327a010012 100644
--- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx
+++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx
@@ -1,16 +1,14 @@
 import React from 'react';
 import * as Metrics from 'components/common/Metrics';
 import { Tag } from 'components/common/Tag/Tag.styled';
-import { Table } from 'components/common/table/Table/Table.styled';
-import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
-import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
-import { NavLink } from 'react-router-dom';
-import { clusterTopicsPath } from 'lib/paths';
 import Switch from 'components/common/Switch/Switch';
 import { useClusters } from 'lib/hooks/api/clusters';
-import { ServerStatus } from 'generated-sources';
+import { Cluster, ServerStatus } from 'generated-sources';
+import { ColumnDef } from '@tanstack/react-table';
+import Table, { SizeCell } from 'components/common/NewTable';
 
 import * as S from './ClustersWidget.styled';
+import ClusterName from './ClusterName';
 
 const ClustersWidget: React.FC = () => {
   const { data } = useClusters();
@@ -28,6 +26,19 @@ const ClustersWidget: React.FC = () => {
     };
   }, [data, showOfflineOnly]);
 
+  const columns = React.useMemo<ColumnDef<Cluster>[]>(
+    () => [
+      { header: 'Cluster name', accessorKey: 'name', cell: ClusterName },
+      { header: 'Version', accessorKey: 'version' },
+      { header: 'Brokers count', accessorKey: 'brokerCount' },
+      { header: 'Partitions', accessorKey: 'onlinePartitionCount' },
+      { header: 'Topics', accessorKey: 'topicCount' },
+      { header: 'Production', accessorKey: 'bytesInPerSec', cell: SizeCell },
+      { header: 'Consumption', accessorKey: 'bytesOutPerSec', cell: SizeCell },
+    ],
+    []
+  );
+
   const handleSwitch = () => setShowOfflineOnly(!showOfflineOnly);
   return (
     <>
@@ -51,45 +62,12 @@ const ClustersWidget: React.FC = () => {
         />
         <label>Only offline clusters</label>
       </S.SwitchWrapper>
-      <Table isFullwidth>
-        <thead>
-          <tr>
-            <TableHeaderCell title="Cluster name" />
-            <TableHeaderCell title="Version" />
-            <TableHeaderCell title="Brokers count" />
-            <TableHeaderCell title="Partitions" />
-            <TableHeaderCell title="Topics" />
-            <TableHeaderCell title="Production" />
-            <TableHeaderCell title="Consumption" />
-          </tr>
-        </thead>
-        <tbody>
-          {config.list.map((cluster) => (
-            <tr key={cluster.name}>
-              <S.TableCell maxWidth="99px" width="350">
-                {cluster.readOnly && <Tag color="blue">readonly</Tag>}{' '}
-                {cluster.name}
-              </S.TableCell>
-              <S.TableCell maxWidth="99px">{cluster.version}</S.TableCell>
-              <S.TableCell maxWidth="99px">{cluster.brokerCount}</S.TableCell>
-              <S.TableCell maxWidth="78px">
-                {cluster.onlinePartitionCount}
-              </S.TableCell>
-              <S.TableCell maxWidth="60px">
-                <NavLink to={clusterTopicsPath(cluster.name)}>
-                  {cluster.topicCount}
-                </NavLink>
-              </S.TableCell>
-              <S.TableCell maxWidth="85px">
-                <BytesFormatted value={cluster.bytesInPerSec} />
-              </S.TableCell>
-              <S.TableCell maxWidth="85px">
-                <BytesFormatted value={cluster.bytesOutPerSec} />
-              </S.TableCell>
-            </tr>
-          ))}
-        </tbody>
-      </Table>
+      <Table
+        columns={columns}
+        data={config?.list}
+        enableSorting
+        emptyMessage="Disk usage data not available"
+      />
     </>
   );
 };
diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx
index c5fa81342c6..dfdcb341796 100644
--- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx
+++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx
@@ -36,8 +36,7 @@ describe('ClustersWidget', () => {
   });
 
   it('render clusterWidget cells', () => {
-    const cells = screen.getAllByRole('cells');
+    const cells = screen.getAllByRole('cell');
     expect(cells.length).toBe(14);
-    expect(cells[0]).toHaveStyle('max-width: 99px');
   });
 });
diff --git a/kafka-ui-react-app/src/components/Schemas/List/List.tsx b/kafka-ui-react-app/src/components/Schemas/List/List.tsx
index 31c280b92ad..8999a81d7b4 100644
--- a/kafka-ui-react-app/src/components/Schemas/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/List/List.tsx
@@ -54,7 +54,17 @@ const List: React.FC = () => {
 
   const columns = React.useMemo<ColumnDef<SchemaSubject>[]>(
     () => [
-      { header: 'Subject', accessorKey: 'subject', cell: LinkCell },
+      {
+        header: 'Subject',
+        accessorKey: 'subject',
+        // eslint-disable-next-line react/no-unstable-nested-components
+        cell: ({ getValue }) => (
+          <LinkCell
+            value={`${getValue<string | number>()}`}
+            to={encodeURIComponent(`${getValue<string | number>()}`)}
+          />
+        ),
+      },
       { header: 'Id', accessorKey: 'id' },
       { header: 'Type', accessorKey: 'schemaType' },
       { header: 'Version', accessorKey: 'version' },
diff --git a/kafka-ui-react-app/src/components/common/NewTable/LinkCell.tsx b/kafka-ui-react-app/src/components/common/NewTable/LinkCell.tsx
index b6ca656d1d1..e400fa0b9c3 100644
--- a/kafka-ui-react-app/src/components/common/NewTable/LinkCell.tsx
+++ b/kafka-ui-react-app/src/components/common/NewTable/LinkCell.tsx
@@ -1,13 +1,11 @@
 import React from 'react';
-import { CellContext } from '@tanstack/react-table';
 import { NavLink } from 'react-router-dom';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const LinkCell: React.FC<CellContext<any, unknown>> = ({ getValue }) => {
-  const value = `${getValue<string | number>()}`;
+const LinkCell = ({ value, to = '' }: any) => {
   const handleClick: React.MouseEventHandler = (e) => e.stopPropagation();
   return (
-    <NavLink to={encodeURIComponent(value)} title={value} onClick={handleClick}>
+    <NavLink to={to} title={value} onClick={handleClick}>
       {value}
     </NavLink>
   );
diff --git a/kafka-ui-react-app/src/components/common/NewTable/__test__/Table.spec.tsx b/kafka-ui-react-app/src/components/common/NewTable/__test__/Table.spec.tsx
index 412fafd484c..480f6e6db15 100644
--- a/kafka-ui-react-app/src/components/common/NewTable/__test__/Table.spec.tsx
+++ b/kafka-ui-react-app/src/components/common/NewTable/__test__/Table.spec.tsx
@@ -63,7 +63,12 @@ const columns: ColumnDef<Datum>[] = [
   {
     header: 'Text',
     accessorKey: 'text',
-    cell: LinkCell,
+    cell: ({ getValue }) => (
+      <LinkCell
+        value={`${getValue<string | number>()}`}
+        to={encodeURIComponent(`${getValue<string | number>()}`)}
+      />
+    ),
   },
   {
     header: 'Size',


Test patch: