diff --git a/frontend/src/components/Connect/List/KafkaConnectLinkCell.tsx b/frontend/src/components/Connect/List/KafkaConnectLinkCell.tsx new file mode 100644 index 000000000..09a5e6ad6 --- /dev/null +++ b/frontend/src/components/Connect/List/KafkaConnectLinkCell.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { LinkCell } from 'components/common/NewTable'; +import useAppParams from 'lib/hooks/useAppParams'; +import { clusterConnectConnectorPath, ClusterNameRoute } from 'lib/paths'; +import { CellContext } from '@tanstack/react-table'; +import { FullConnectorInfo } from 'generated-sources'; + +type KafkaConnectLinkCellProps = CellContext; + +export const KafkaConnectLinkCell = ({ + getValue, + row, +}: KafkaConnectLinkCellProps) => { + const { clusterName } = useAppParams(); + const { connect, name } = row.original; + const value = getValue(); + + return ( + + ); +}; diff --git a/frontend/src/components/Connect/List/List.tsx b/frontend/src/components/Connect/List/List.tsx index f85a1f314..c3a595688 100644 --- a/frontend/src/components/Connect/List/List.tsx +++ b/frontend/src/components/Connect/List/List.tsx @@ -1,24 +1,25 @@ import React from 'react'; import useAppParams from 'lib/hooks/useAppParams'; -import { clusterConnectConnectorPath, ClusterNameRoute } from 'lib/paths'; +import { ClusterNameRoute } from 'lib/paths'; import Table, { TagCell } from 'components/common/NewTable'; import { FullConnectorInfo } from 'generated-sources'; import { useConnectors } from 'lib/hooks/api/kafkaConnect'; import { ColumnDef } from '@tanstack/react-table'; -import { useNavigate, useSearchParams } from 'react-router-dom'; -import BreakableTextCell from 'components/common/NewTable/BreakableTextCell'; +import { useSearchParams } from 'react-router-dom'; import { useQueryPersister } from 'components/common/NewTable/ColumnFilter'; import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib'; +import BreakableTextCell from 'components/common/NewTable/BreakableTextCell'; import ActionsCell from './ActionsCell'; import TopicsCell from './TopicsCell'; import RunningTasksCell from './RunningTasksCell'; +import { KafkaConnectLinkCell } from './KafkaConnectLinkCell'; -const kafkaConnectColumns: ColumnDef[] = [ +const kafkaConnectColumns: ColumnDef[] = [ { header: 'Name', accessorKey: 'name', - cell: BreakableTextCell, + cell: KafkaConnectLinkCell, enableResizing: true, }, { @@ -77,7 +78,6 @@ const kafkaConnectColumns: ColumnDef[] = [ ]; const List: React.FC = () => { - const navigate = useNavigate(); const { clusterName } = useAppParams(); const [searchParams] = useSearchParams(); const { data: connectors } = useConnectors( @@ -95,9 +95,6 @@ const List: React.FC = () => { enableSorting enableColumnResizing columnSizingPersister={columnSizingPersister} - onRowClick={({ original: { connect, name } }) => - navigate(clusterConnectConnectorPath(clusterName, connect, name)) - } emptyMessage="No connectors found" setRowId={(originalRow) => `${originalRow.name}-${originalRow.connect}`} filterPersister={filterPersister} diff --git a/frontend/src/components/Connect/List/__tests__/List.spec.tsx b/frontend/src/components/Connect/List/__tests__/List.spec.tsx index 194d97246..9e09fc50c 100644 --- a/frontend/src/components/Connect/List/__tests__/List.spec.tsx +++ b/frontend/src/components/Connect/List/__tests__/List.spec.tsx @@ -64,18 +64,13 @@ describe('Connectors List', () => { it('opens broker when row clicked', async () => { renderComponent(); - await userEvent.click( - screen.getByRole('row', { - name: 'hdfs-source-connector first SOURCE FileStreamSource a b c RUNNING 2 of 2', - }) - ); - await waitFor(() => - expect(mockedUsedNavigate).toBeCalledWith( - clusterConnectConnectorPath( - clusterName, - 'first', - 'hdfs-source-connector' - ) + screen.debug(); + expect(screen.getByText('hdfs-source-connector')).toHaveAttribute( + 'href', + clusterConnectConnectorPath( + clusterName, + 'first', + 'hdfs-source-connector' ) ); });