UX: Open KC connectors in a separate tab (#1165)

Co-authored-by: German Osin <[email protected]>

Author: Nilumilak

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<FullConnectorInfo, string>;
+
+export const KafkaConnectLinkCell = ({
+  getValue,
+  row,
+}: KafkaConnectLinkCellProps) => {
+  const { clusterName } = useAppParams<ClusterNameRoute>();
+  const { connect, name } = row.original;
+  const value = getValue();
+
+  return (
+    <LinkCell
+      value={value}
+      to={clusterConnectConnectorPath(clusterName, connect, name)}
+      wordBreak
+    />
+  );
+};

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<FullConnectorInfo>[] = [
+const kafkaConnectColumns: ColumnDef<FullConnectorInfo, string>[] = [
   {
     header: 'Name',
     accessorKey: 'name',
-    cell: BreakableTextCell,
+    cell: KafkaConnectLinkCell,
     enableResizing: true,
   },
   {
@@ -77,7 +78,6 @@ const kafkaConnectColumns: ColumnDef<FullConnectorInfo>[] = [
 ];
 
 const List: React.FC = () => {
-  const navigate = useNavigate();
   const { clusterName } = useAppParams<ClusterNameRoute>();
   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}

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