eslint fix

Author: Leshe4ka

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

@@ -1,14 +1,19 @@
 import React from 'react';
 import useAppParams from 'lib/hooks/useAppParams';
-import {
-  clusterTopicPath,
-  RouterParamsClusterConnectConnector,
-} from 'lib/paths';
+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 { Link } from 'react-router-dom';
-import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
+
+import { TopicNameCell } from './cells/TopicNameCell';
+
+const columns: ColumnDef<{ topicName: string }>[] = [
+  {
+    header: 'Topic',
+    accessorKey: 'topicName',
+    cell: TopicNameCell,
+  },
+];
 
 const Topics = () => {
   const routerProps = useAppParams<RouterParamsClusterConnectConnector>();
@@ -17,24 +22,6 @@ const Topics = () => {
 
   const connector = { ...raw, topics: ['wikimedia.recentchange.connect'] };
 
-  const columns: ColumnDef<{ topicName: string }>[] = [
-    {
-      header: 'Topic',
-      accessorKey: 'topicName',
-      cell: ({ getValue }) => {
-        const topicName = getValue<string>();
-
-        return (
-          <TableKeyLink>
-            <Link to={clusterTopicPath(routerProps.clusterName, topicName)}>
-              {topicName}
-            </Link>
-          </TableKeyLink>
-        );
-      },
-    },
-  ];
-
   const tableData = (connector?.topics ?? []).map((topicName) => ({
     topicName,
   }));

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>
+  );
+};