From a9b6bf04ad6328b7a0bc03273fc0519a5fec47ba Mon Sep 17 00:00:00 2001 From: Renat Kalimulin Date: Fri, 4 Jul 2025 19:10:12 +0300 Subject: [PATCH 1/2] UX: Open KC connectors in a separate tab Resolves: #1088 --- .../Connect/List/KafkaConnectLinkCell.tsx | 25 +++++++++++ frontend/src/components/Connect/List/List.tsx | 19 ++++----- .../Connect/List/__tests__/List.spec.tsx | 41 ++++++++++++++----- 3 files changed, 63 insertions(+), 22 deletions(-) create mode 100644 frontend/src/components/Connect/List/KafkaConnectLinkCell.tsx 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..60e6e48ba 100644 --- a/frontend/src/components/Connect/List/List.tsx +++ b/frontend/src/components/Connect/List/List.tsx @@ -1,30 +1,30 @@ 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 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, }, { header: 'Connect', accessorKey: 'connect', - cell: BreakableTextCell, + cell: KafkaConnectLinkCell, filterFn: 'arrIncludesSome', meta: { filterVariant: 'multi-select', @@ -34,6 +34,7 @@ const kafkaConnectColumns: ColumnDef[] = [ { header: 'Type', accessorKey: 'type', + cell: KafkaConnectLinkCell, meta: { filterVariant: 'multi-select' }, filterFn: 'arrIncludesSome', size: 120, @@ -41,7 +42,7 @@ const kafkaConnectColumns: ColumnDef[] = [ { header: 'Plugin', accessorKey: 'connectorClass', - cell: BreakableTextCell, + cell: KafkaConnectLinkCell, meta: { filterVariant: 'multi-select' }, filterFn: 'arrIncludesSome', 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..18bcc836c 100644 --- a/frontend/src/components/Connect/List/__tests__/List.spec.tsx +++ b/frontend/src/components/Connect/List/__tests__/List.spec.tsx @@ -64,18 +64,37 @@ 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', - }) + screen.debug(); + expect(screen.getByText('hdfs-source-connector')).toHaveAttribute( + 'href', + clusterConnectConnectorPath( + clusterName, + 'first', + 'hdfs-source-connector' + ) + ); + expect(screen.getByText('first')).toHaveAttribute( + 'href', + clusterConnectConnectorPath( + clusterName, + 'first', + 'hdfs-source-connector' + ) + ); + expect(screen.getByText('SOURCE')).toHaveAttribute( + 'href', + clusterConnectConnectorPath( + clusterName, + 'first', + 'hdfs-source-connector' + ) ); - await waitFor(() => - expect(mockedUsedNavigate).toBeCalledWith( - clusterConnectConnectorPath( - clusterName, - 'first', - 'hdfs-source-connector' - ) + expect(screen.getAllByText('FileStreamSource')[0]).toHaveAttribute( + 'href', + clusterConnectConnectorPath( + clusterName, + 'first', + 'hdfs-source-connector' ) ); }); From 8a486d2cd3a32b1642ce1783342b2d94fd7f67db Mon Sep 17 00:00:00 2001 From: Renat Kalimulin Date: Tue, 15 Jul 2025 13:39:28 +0300 Subject: [PATCH 2/2] fixes --- frontend/src/components/Connect/List/List.tsx | 6 ++--- .../Connect/List/__tests__/List.spec.tsx | 24 ------------------- 2 files changed, 3 insertions(+), 27 deletions(-) diff --git a/frontend/src/components/Connect/List/List.tsx b/frontend/src/components/Connect/List/List.tsx index 60e6e48ba..c3a595688 100644 --- a/frontend/src/components/Connect/List/List.tsx +++ b/frontend/src/components/Connect/List/List.tsx @@ -8,6 +8,7 @@ import { ColumnDef } from '@tanstack/react-table'; 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'; @@ -24,7 +25,7 @@ const kafkaConnectColumns: ColumnDef[] = [ { header: 'Connect', accessorKey: 'connect', - cell: KafkaConnectLinkCell, + cell: BreakableTextCell, filterFn: 'arrIncludesSome', meta: { filterVariant: 'multi-select', @@ -34,7 +35,6 @@ const kafkaConnectColumns: ColumnDef[] = [ { header: 'Type', accessorKey: 'type', - cell: KafkaConnectLinkCell, meta: { filterVariant: 'multi-select' }, filterFn: 'arrIncludesSome', size: 120, @@ -42,7 +42,7 @@ const kafkaConnectColumns: ColumnDef[] = [ { header: 'Plugin', accessorKey: 'connectorClass', - cell: KafkaConnectLinkCell, + cell: BreakableTextCell, meta: { filterVariant: 'multi-select' }, filterFn: 'arrIncludesSome', enableResizing: true, diff --git a/frontend/src/components/Connect/List/__tests__/List.spec.tsx b/frontend/src/components/Connect/List/__tests__/List.spec.tsx index 18bcc836c..9e09fc50c 100644 --- a/frontend/src/components/Connect/List/__tests__/List.spec.tsx +++ b/frontend/src/components/Connect/List/__tests__/List.spec.tsx @@ -73,30 +73,6 @@ describe('Connectors List', () => { 'hdfs-source-connector' ) ); - expect(screen.getByText('first')).toHaveAttribute( - 'href', - clusterConnectConnectorPath( - clusterName, - 'first', - 'hdfs-source-connector' - ) - ); - expect(screen.getByText('SOURCE')).toHaveAttribute( - 'href', - clusterConnectConnectorPath( - clusterName, - 'first', - 'hdfs-source-connector' - ) - ); - expect(screen.getAllByText('FileStreamSource')[0]).toHaveAttribute( - 'href', - clusterConnectConnectorPath( - clusterName, - 'first', - 'hdfs-source-connector' - ) - ); }); });