few updates

Author: Leshe4ka

frontend/src/components/Brokers/BrokersList/BrokersList.tsx

@@ -2,13 +2,15 @@ import React, { useMemo } from 'react';
 import { ClusterName } from 'lib/interfaces/cluster';
 import { useNavigate } from 'react-router-dom';
 import useAppParams from 'lib/hooks/useAppParams';
-import Table from 'components/common/NewTable';
+import Table, {
+  exportTableCSV,
+  TableProvider,
+} from 'components/common/NewTable';
 import { clusterBrokerPath } from 'lib/paths';
 import { useBrokers } from 'lib/hooks/api/brokers';
 import { useClusterStats } from 'lib/hooks/api/clusters';
 import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
-import { DownloadCsvButton } from 'components/common/DownloadCsvButton/DownloadCsvButton';
-import { brokersApiClient } from 'lib/api';
+import { Button } from 'components/common/Button/Button';
 
 import { getBrokersTableColumns, getBrokersTableRows } from './lib';
 import { BrokersMetrics } from './BrokersMetrics/BrokersMetrics';
@@ -45,40 +47,49 @@ const BrokersList: React.FC = () => {
 
   const columns = useMemo(() => getBrokersTableColumns(), []);
 
-  const fetchCsv = async () => {
-    return brokersApiClient.getBrokersCsv({ clusterName });
-  };
-
   return (
-    <>
-      <ResourcePageHeading text="Brokers">
-        <DownloadCsvButton
-          fetchCsv={fetchCsv}
-          filePrefix={`brokers-${clusterName}`}
-        />
-      </ResourcePageHeading>
+    <TableProvider>
+      {({ table }) => {
+        const handleExportClick = () => {
+          exportTableCSV(table, { prefix: 'brokers' });
+        };
+
+        return (
+          <>
+            <ResourcePageHeading text="Brokers">
+              <Button
+                buttonType="primary"
+                buttonSize="M"
+                onClick={handleExportClick}
+              >
+                Export CSV
+              </Button>
+            </ResourcePageHeading>
 
-      <BrokersMetrics
-        brokerCount={brokerCount}
-        inSyncReplicasCount={inSyncReplicasCount}
-        outOfSyncReplicasCount={outOfSyncReplicasCount}
-        version={version}
-        activeControllers={activeControllers}
-        offlinePartitionCount={offlinePartitionCount}
-        onlinePartitionCount={onlinePartitionCount}
-        underReplicatedPartitionCount={underReplicatedPartitionCount}
-      />
+            <BrokersMetrics
+              brokerCount={brokerCount}
+              inSyncReplicasCount={inSyncReplicasCount}
+              outOfSyncReplicasCount={outOfSyncReplicasCount}
+              version={version}
+              activeControllers={activeControllers}
+              offlinePartitionCount={offlinePartitionCount}
+              onlinePartitionCount={onlinePartitionCount}
+              underReplicatedPartitionCount={underReplicatedPartitionCount}
+            />
 
-      <Table
-        columns={columns}
-        data={rows}
-        enableSorting
-        onRowClick={({ original: { brokerId } }) =>
-          navigate(clusterBrokerPath(clusterName, brokerId))
-        }
-        emptyMessage="No clusters are online"
-      />
-    </>
+            <Table
+              columns={columns}
+              data={rows}
+              enableSorting
+              onRowClick={({ original: { brokerId } }) =>
+                navigate(clusterBrokerPath(clusterName, brokerId))
+              }
+              emptyMessage="No clusters are online"
+            />
+          </>
+        );
+      }}
+    </TableProvider>
   );
 };
 

frontend/src/components/Connect/Connect.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import { Navigate, NavLink, Route, Routes } from 'react-router-dom';
+import { Navigate, Routes, Route, NavLink } from 'react-router-dom';
 import {
   clusterConnectorsPath,
-  clusterConnectorsRelativePath,
   ClusterNameRoute,
   kafkaConnectClustersPath,
   kafkaConnectClustersRelativePath,
+  clusterConnectorsRelativePath,
 } from 'lib/paths';
 import useAppParams from 'lib/hooks/useAppParams';
 import Navbar from 'components/common/Navigation/Navbar.styled';
 import Clusters from 'components/Connect/Clusters/Clusters';
+import { TableProvider } from 'components/common/NewTable';
 
 import Connectors from './List/ListPage';
 import Header from './Header/Header';
@@ -18,7 +19,7 @@ const Connect: React.FC = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
 
   return (
-    <>
+    <TableProvider>
       <Header />
       <Navbar role="navigation">
         <NavLink
@@ -46,7 +47,7 @@ const Connect: React.FC = () => {
         <Route path={kafkaConnectClustersRelativePath} element={<Clusters />} />
         <Route path={clusterConnectorsRelativePath} element={<Connectors />} />
       </Routes>
-    </>
+    </TableProvider>
   );
 };
 

frontend/src/components/Connect/Header/Header.tsx

@@ -2,12 +2,8 @@ import { ActionButton } from 'components/common/ActionComponent';
 import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 import Tooltip from 'components/common/Tooltip/Tooltip';
 import ClusterContext from 'components/contexts/ClusterContext';
-import {
-  Action,
-  ConnectorColumnsToSort,
-  ResourceType,
-  SortOrder,
-} from 'generated-sources';
+import { ResourceType, Action } from 'generated-sources';
+import { useConnects } from 'lib/hooks/api/kafkaConnect';
 import useAppParams from 'lib/hooks/useAppParams';
 import {
   clusterConnectorNewPath,
@@ -16,46 +12,38 @@ import {
   kafkaConnectClustersRelativePath,
 } from 'lib/paths';
 import React from 'react';
-import { DownloadCsvButton } from 'components/common/DownloadCsvButton/DownloadCsvButton';
-import { kafkaConnectApiClient } from 'lib/api';
-import { connects } from 'lib/fixtures/kafkaConnect';
-import { useSearchParams } from 'react-router-dom';
-import useFts from 'components/common/Fts/useFts';
+import { exportTableCSV, useTableInstance } from 'components/common/NewTable';
+import { Button } from 'components/common/Button/Button';
 
 type ConnectPage =
   | typeof kafkaConnectClustersRelativePath
   | typeof clusterConnectorsRelativePath;
 
+const getCsvPrefix = (page: ConnectPage) => {
+  let prefix = 'kafka-connect';
+
+  if (page === clusterConnectorsRelativePath) {
+    prefix += '-connectors';
+  }
+
+  if (page === kafkaConnectClustersRelativePath) {
+    prefix += '-clusters';
+  }
+
+  return prefix;
+};
+
 const Header = () => {
   const { isReadOnly } = React.useContext(ClusterContext);
   const { '*': currentPath, clusterName } = useAppParams<
     ClusterNameRoute & { ['*']: ConnectPage }
   >();
-  const [searchParams] = useSearchParams();
-  const { isFtsEnabled } = useFts('connects');
-
-  const fetchCsv = async () => {
-    if (currentPath === kafkaConnectClustersRelativePath) {
-      return kafkaConnectApiClient.getConnectsCsv({
-        clusterName,
-        withStats: true,
-      });
-    }
+  const { data: connects = [] } = useConnects(clusterName, true);
 
-    if (currentPath === clusterConnectorsRelativePath) {
-      return kafkaConnectApiClient.getAllConnectorsCsv({
-        clusterName,
-        search: searchParams.get('q') || undefined,
-        fts: isFtsEnabled,
-        orderBy:
-          (searchParams.get('sortBy') as ConnectorColumnsToSort) || undefined,
-        sortOrder:
-          (searchParams.get('sortDirection')?.toUpperCase() as SortOrder) ||
-          undefined,
-      });
-    }
+  const { table } = useTableInstance();
 
-    return '';
+  const handleExportClick = () => {
+    exportTableCSV(table, { prefix: getCsvPrefix(currentPath) });
   };
 
   return (
@@ -64,7 +52,6 @@ const Header = () => {
         <Tooltip
           value={
             <ActionButton
-              name="Create Connector"
               buttonType="primary"
               buttonSize="M"
               disabled={!connects.length}
@@ -83,10 +70,9 @@ const Header = () => {
         />
       )}
 
-      <DownloadCsvButton
-        filePrefix={`connectors-${clusterName}`}
-        fetchCsv={fetchCsv}
-      />
+      <Button buttonType="primary" buttonSize="M" onClick={handleExportClick}>
+        Export CSV
+      </Button>
     </ResourcePageHeading>
   );
 };