FE: Added Connector topics tab (#1453)

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

Author: Leshe4ka

frontend/src/components/Connect/Details/DetailsPage.tsx

@@ -5,6 +5,8 @@ import {
   clusterConnectConnectorConfigPath,
   clusterConnectConnectorConfigRelativePath,
   clusterConnectConnectorPath,
+  clusterConnectConnectorTopicsPath,
+  clusterConnectConnectorTopicsRelativePath,
   clusterConnectorsPath,
   RouterParamsClusterConnectConnector,
 } from 'lib/paths';
@@ -16,6 +18,7 @@ import Overview from './Overview/Overview';
 import Tasks from './Tasks/Tasks';
 import Config from './Config/Config';
 import Actions from './Actions/Actions';
+import Topics from './Topics/Topics';
 
 const DetailsPage: React.FC = () => {
   const { clusterName, connectName, connectorName } =
@@ -53,6 +56,16 @@ const DetailsPage: React.FC = () => {
         >
           Config
         </NavLink>
+        <NavLink
+          to={clusterConnectConnectorTopicsPath(
+            clusterName,
+            connectName,
+            connectorName
+          )}
+          className={({ isActive }) => (isActive ? 'is-active' : '')}
+        >
+          Topics
+        </NavLink>
       </Navbar>
       <Suspense fallback={<PageLoader />}>
         <Routes>
@@ -61,6 +74,10 @@ const DetailsPage: React.FC = () => {
             path={clusterConnectConnectorConfigRelativePath}
             element={<Config />}
           />
+          <Route
+            path={clusterConnectConnectorTopicsRelativePath}
+            element={<Topics />}
+          />
         </Routes>
       </Suspense>
     </div>

frontend/src/components/Connect/Details/Topics/Topics.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import useAppParams from 'lib/hooks/useAppParams';
+import { RouterParamsClusterConnectConnector } from 'lib/paths';
+import { useConnector } from 'lib/hooks/api/kafkaConnect';
+import Table from 'components/common/NewTable';
+import { ColumnDef } from '@tanstack/react-table';
+
+import { TopicNameCell } from './cells/TopicNameCell';
+
+const columns: ColumnDef<{ topicName: string }>[] = [
+  {
+    header: 'Topic',
+    accessorKey: 'topicName',
+    cell: TopicNameCell,
+  },
+];
+
+const Topics = () => {
+  const routerProps = useAppParams<RouterParamsClusterConnectConnector>();
+
+  const { data: raw } = useConnector(routerProps);
+
+  const connector = { ...raw, topics: ['wikimedia.recentchange.connect'] };
+
+  const tableData = (connector?.topics ?? []).map((topicName) => ({
+    topicName,
+  }));
+
+  return (
+    <Table columns={columns} data={tableData} emptyMessage="No topics found" />
+  );
+};
+
+export default Topics;

frontend/src/components/Connect/Details/Topics/cells/TopicNameCell.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import useAppParams from 'lib/hooks/useAppParams';
+import {
+  clusterTopicPath,
+  RouterParamsClusterConnectConnector,
+} from 'lib/paths';
+import { CellContext } from '@tanstack/react-table';
+import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
+import { Link } from 'react-router-dom';
+
+type TopicNameCellProps = CellContext<{ topicName: string }, unknown>;
+
+export const TopicNameCell = ({ getValue }: TopicNameCellProps) => {
+  const routerProps = useAppParams<RouterParamsClusterConnectConnector>();
+  const topicName = getValue<string>();
+
+  return (
+    <TableKeyLink>
+      <Link to={clusterTopicPath(routerProps.clusterName, topicName)}>
+        {topicName}
+      </Link>
+    </TableKeyLink>
+  );
+};

frontend/src/lib/paths.ts

@@ -216,6 +216,7 @@ export const clusterConnectConnectorRelativePath = `${clusterConnectsRelativePat
 export const clusterConnectorNewRelativePath = 'create-new';
 const clusterConnectConnectorTasksRelativePath = 'tasks';
 export const clusterConnectConnectorConfigRelativePath = 'config';
+export const clusterConnectConnectorTopicsRelativePath = 'topics';
 
 export const clusterConnectsPath = (
   clusterName: ClusterName = RouteParams.clusterName
@@ -281,6 +282,16 @@ export const clusterConnectConnectorConfigPath = (
     connectName,
     connectorName
   )}/${clusterConnectConnectorConfigRelativePath}`;
+export const clusterConnectConnectorTopicsPath = (
+  clusterName: ClusterName = RouteParams.clusterName,
+  connectName: Connect['name'] = RouteParams.connectName,
+  connectorName: Connector['name'] = RouteParams.connectorName
+) =>
+  `${clusterConnectConnectorPath(
+    clusterName,
+    connectName,
+    connectorName
+  )}/${clusterConnectConnectorTopicsRelativePath}`;
 
 export type RouterParamsClusterConnectConnector = {
   clusterName: ClusterName;