FE: issue #1090 Added Kafka Connect tab to the topic (#1439)

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

Author: Leshe4ka

frontend/src/components/Connect/List/ConnectorsTable/ConnectorsTable.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { FullConnectorInfo } from 'generated-sources';
+import Table from 'components/common/NewTable';
+import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib';
+import { useQueryPersister } from 'components/common/NewTable/ColumnFilter';
+import { VisibilityState } from '@tanstack/react-table';
+
+import { connectorsColumns } from './connectorsColumns/columns';
+
+const setRowId = (originalRow: FullConnectorInfo) =>
+  `${originalRow.name}-${originalRow.connect}`;
+
+type ConnectorsTableProps = {
+  connectors: FullConnectorInfo[];
+  columnSizingPersistKey?: string;
+  columnVisibility?: VisibilityState;
+};
+
+export const ConnectorsTable = ({
+  connectors,
+  columnSizingPersistKey = 'KafkaConnect',
+  columnVisibility,
+}: ConnectorsTableProps) => {
+  const filterPersister = useQueryPersister(connectorsColumns);
+  const columnSizingPersister = useLocalStoragePersister(
+    columnSizingPersistKey
+  );
+
+  return (
+    <Table
+      data={connectors}
+      columns={connectorsColumns}
+      enableSorting
+      enableColumnResizing
+      columnSizingPersister={columnSizingPersister}
+      emptyMessage="No connectors found"
+      setRowId={setRowId}
+      filterPersister={filterPersister}
+      columnVisibility={columnVisibility}
+    />
+  );
+};

frontend/src/components/Connect/List/ActionsCell.tsx renamed to frontend/src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/ActionsCell.tsx

@@ -7,7 +7,7 @@ import {
   ResourceType,
 } from 'generated-sources';
 import { CellContext } from '@tanstack/react-table';
-import { ClusterNameRoute } from 'lib/paths';
+import { RouteParamsClusterTopic } from 'lib/paths';
 import useAppParams from 'lib/hooks/useAppParams';
 import { Dropdown } from 'components/common/Dropdown';
 import {
@@ -24,7 +24,7 @@ const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
   row,
 }) => {
   const { connect, name, status } = row.original;
-  const { clusterName } = useAppParams<ClusterNameRoute>();
+  const { clusterName, topicName } = useAppParams<RouteParamsClusterTopic>();
   const { isReadOnly } = useContext(ClusterContext);
   const mutationsNumber = useIsMutating();
   const isMutating = mutationsNumber > 0;
@@ -33,16 +33,19 @@ const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
     clusterName,
     connectName: connect,
     connectorName: name,
+    topicName,
   });
   const stateMutation = useUpdateConnectorState({
     clusterName,
     connectName: connect,
     connectorName: name,
+    topicName,
   });
   const resetConnectorOffsetsMutation = useResetConnectorOffsets({
     clusterName,
     connectName: connect,
     connectorName: name,
+    topicName,
   });
   const handleDelete = () => {
     confirm(
@@ -54,7 +57,7 @@ const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
       }
     );
   };
-  // const stateMutation = useUpdateConnectorState(routerProps);
+
   const resumeConnectorHandler = () =>
     stateMutation.mutateAsync(ConnectorAction.RESUME);
   const restartConnectorHandler = () =>

frontend/src/components/Connect/List/KafkaConnectLinkCell.tsx renamed to frontend/src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/KafkaConnectLinkCell.tsx

@@ -6,7 +6,7 @@ import { MultiLineTag } from 'components/common/Tag/Tag.styled';
 import { ClusterNameRoute, clusterTopicPath } from 'lib/paths';
 import useAppParams from 'lib/hooks/useAppParams';
 
-import * as S from './List.styled';
+import * as S from './TopicsCell.styled';
 
 const TopicsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
   row,

frontend/src/components/Connect/List/RunningTasksCell.tsx renamed to frontend/src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/RunningTasksCell.tsx

@@ -0,0 +1,69 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { FullConnectorInfo } from 'generated-sources';
+import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
+import { TagCell } from 'components/common/NewTable';
+
+import { KafkaConnectLinkCell } from './cells/KafkaConnectLinkCell';
+import TopicsCell from './cells/TopicsCell';
+import RunningTasksCell from './cells/RunningTasksCell';
+import ActionsCell from './cells/ActionsCell';
+
+export const connectorsColumns: ColumnDef<FullConnectorInfo, string>[] = [
+  {
+    header: 'Name',
+    accessorKey: 'name',
+    cell: KafkaConnectLinkCell,
+    enableResizing: true,
+  },
+  {
+    header: 'Connect',
+    accessorKey: 'connect',
+    cell: BreakableTextCell,
+    filterFn: 'arrIncludesSome',
+    meta: { filterVariant: 'multi-select' },
+    enableResizing: true,
+  },
+  {
+    header: 'Type',
+    accessorKey: 'type',
+    meta: { filterVariant: 'multi-select' },
+    filterFn: 'arrIncludesSome',
+    size: 120,
+  },
+  {
+    header: 'Plugin',
+    accessorKey: 'connectorClass',
+    cell: BreakableTextCell,
+    meta: { filterVariant: 'multi-select' },
+    filterFn: 'arrIncludesSome',
+    enableResizing: true,
+  },
+  {
+    header: 'Topics',
+    accessorKey: 'topics',
+    cell: TopicsCell,
+    enableColumnFilter: true,
+    meta: { filterVariant: 'multi-select' },
+    filterFn: 'arrIncludesSome',
+    enableResizing: true,
+  },
+  {
+    header: 'Status',
+    accessorKey: 'status.state',
+    cell: TagCell,
+    meta: { filterVariant: 'multi-select' },
+    filterFn: 'arrIncludesSome',
+  },
+  {
+    id: 'running_task',
+    header: 'Running Tasks',
+    cell: RunningTasksCell,
+    size: 120,
+  },
+  {
+    header: '',
+    id: 'action',
+    cell: ActionsCell,
+    size: 60,
+  },
+];

frontend/src/components/Connect/List/List.styled.ts renamed to frontend/src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/TopicsCell.styled.ts

@@ -1,105 +1,19 @@
 import React from 'react';
 import useAppParams from 'lib/hooks/useAppParams';
 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 { 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, string>[] = [
-  {
-    header: 'Name',
-    accessorKey: 'name',
-    cell: KafkaConnectLinkCell,
-    enableResizing: true,
-  },
-  {
-    header: 'Connect',
-    accessorKey: 'connect',
-    cell: BreakableTextCell,
-    filterFn: 'arrIncludesSome',
-    meta: {
-      filterVariant: 'multi-select',
-    },
-    enableResizing: true,
-  },
-  {
-    header: 'Type',
-    accessorKey: 'type',
-    meta: { filterVariant: 'multi-select' },
-    filterFn: 'arrIncludesSome',
-    size: 120,
-  },
-  {
-    header: 'Plugin',
-    accessorKey: 'connectorClass',
-    cell: BreakableTextCell,
-    meta: { filterVariant: 'multi-select' },
-    filterFn: 'arrIncludesSome',
-    enableResizing: true,
-  },
-  {
-    header: 'Topics',
-    accessorKey: 'topics',
-    cell: TopicsCell,
-    enableColumnFilter: true,
-    meta: { filterVariant: 'multi-select' },
-    filterFn: 'arrIncludesSome',
-    enableResizing: true,
-  },
-  {
-    header: 'Status',
-    accessorKey: 'status.state',
-    cell: TagCell,
-    meta: { filterVariant: 'multi-select' },
-    filterFn: 'arrIncludesSome',
-  },
-  {
-    id: 'running_task',
-    header: 'Running Tasks',
-    cell: RunningTasksCell,
-    size: 120,
-  },
-  {
-    header: '',
-    id: 'action',
-    cell: ActionsCell,
-    size: 60,
-  },
-];
+import { ConnectorsTable } from 'components/Connect/List/ConnectorsTable/ConnectorsTable';
 
 const List: React.FC = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
   const [searchParams] = useSearchParams();
-  const { data: connectors } = useConnectors(
+  const { data: connectors = [] } = useConnectors(
     clusterName,
     searchParams.get('q') || ''
   );
 
-  const filterPersister = useQueryPersister(kafkaConnectColumns);
-  const columnSizingPersister = useLocalStoragePersister('KafkaConnect');
-
-  return (
-    <Table
-      data={connectors || []}
-      columns={kafkaConnectColumns}
-      enableSorting
-      enableColumnResizing
-      columnSizingPersister={columnSizingPersister}
-      emptyMessage="No connectors found"
-      setRowId={(originalRow) => `${originalRow.name}-${originalRow.connect}`}
-      filterPersister={filterPersister}
-    />
-  );
+  return <ConnectorsTable connectors={connectors} />;
 };
 
 export default List;

frontend/src/components/Connect/List/TopicsCell.tsx renamed to frontend/src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/TopicsCell.tsx

@@ -1,29 +1,21 @@
 import React, { Suspense } from 'react';
-import useAppParams from 'lib/hooks/useAppParams';
-import { ClusterNameRoute } from 'lib/paths';
 import Search from 'components/common/Search/Search';
 import PageLoader from 'components/common/PageLoader/PageLoader';
-import { useConnectors } from 'lib/hooks/api/kafkaConnect';
 
 import * as S from './ListPage.styled';
 import List from './List';
 import ConnectorsStatistics from './Statistics/Statistics';
 
-const ListPage: React.FC = () => {
-  const { clusterName } = useAppParams<ClusterNameRoute>();
-  const { data, isLoading } = useConnectors(clusterName);
-
-  return (
-    <>
-      <ConnectorsStatistics connectors={data ?? []} isLoading={isLoading} />
-      <S.Search hasInput>
-        <Search placeholder="Search by Connect Name, Status or Type" />
-      </S.Search>
-      <Suspense fallback={<PageLoader />}>
-        <List />
-      </Suspense>
-    </>
-  );
-};
+const ListPage: React.FC = () => (
+  <>
+    <ConnectorsStatistics />
+    <S.Search hasInput>
+      <Search placeholder="Search by Connect Name, Status or Type" />
+    </S.Search>
+    <Suspense fallback={<PageLoader />}>
+      <List />
+    </Suspense>
+  </>
+);
 
 export default ListPage;

frontend/src/components/Connect/List/ConnectorsTable/connectorsColumns/columns.tsx

@@ -1,17 +1,16 @@
 import React, { useMemo } from 'react';
 import * as Statistics from 'components/common/Statistics';
-import { FullConnectorInfo } from 'generated-sources';
+import useAppParams from 'lib/hooks/useAppParams';
+import { ClusterNameRoute } from 'lib/paths';
+import { useConnectors } from 'lib/hooks/api/kafkaConnect';
 
 import { computeStatistics } from './models/computeStatistics';
 
-type Props = {
-  connectors: FullConnectorInfo[];
-  isLoading: boolean;
-};
-const ConnectorsStatistics = ({ connectors, isLoading }: Props) => {
-  const statistics = useMemo(() => {
-    return computeStatistics(connectors);
-  }, [connectors]);
+const ConnectorsStatistics = () => {
+  const { clusterName } = useAppParams<ClusterNameRoute>();
+  const { data: connectors = [], isLoading } = useConnectors(clusterName);
+
+  const statistics = useMemo(() => computeStatistics(connectors), [connectors]);
 
   return (
     <Statistics.Container role="group">