Collapse long connector topic lists

frontend/src/components/Connect/Details/Topics/Topics.styled.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const ToggleButtonWrapper = styled.div`
+  margin-top: 8px;
+`;

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

@@ -4,8 +4,10 @@ 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 { Button } from 'components/common/Button/Button';
 
 import { TopicNameCell } from './cells/TopicNameCell';
+import * as S from './Topics.styled';
 
 const columns: ColumnDef<{ topicName: string }>[] = [
   {
@@ -15,17 +17,39 @@ const columns: ColumnDef<{ topicName: string }>[] = [
   },
 ];
 
+const COLLAPSED_TOPICS_COUNT = 10;
+
 const Topics = () => {
   const routerProps = useAppParams<RouterParamsClusterConnectConnector>();
+  const [isExpanded, setIsExpanded] = React.useState(false);
 
   const { data: connector } = useConnector(routerProps);
 
-  const tableData = (connector?.topics ?? []).map((topicName) => ({
-    topicName,
-  }));
+  const topics = connector?.topics ?? [];
+  const visibleTopics = isExpanded
+    ? topics
+    : topics.slice(0, COLLAPSED_TOPICS_COUNT);
+  const tableData = visibleTopics.map((topicName) => ({ topicName }));
 
   return (
-    <Table columns={columns} data={tableData} emptyMessage="No topics found" />
+    <>
+      <Table
+        columns={columns}
+        data={tableData}
+        emptyMessage="No topics found"
+      />
+      {topics.length > COLLAPSED_TOPICS_COUNT && (
+        <S.ToggleButtonWrapper>
+          <Button
+            buttonType="text"
+            buttonSize="S"
+            onClick={() => setIsExpanded((prevState) => !prevState)}
+          >
+            {isExpanded ? 'Show less' : `Show all ${topics.length} topics`}
+          </Button>
+        </S.ToggleButtonWrapper>
+      )}
+    </>
   );
 };
 

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render, WithRoute } from 'lib/testHelpers';
+import { clusterConnectConnectorTopicsPath } from 'lib/paths';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { connector } from 'lib/fixtures/kafkaConnect';
+import { useConnector } from 'lib/hooks/api/kafkaConnect';
+import Topics from 'components/Connect/Details/Topics/Topics';
+
+jest.mock('lib/hooks/api/kafkaConnect', () => ({
+  useConnector: jest.fn(),
+}));
+
+const clusterName = 'local';
+const connectName = 'main-connect';
+const connectorName = 'big-connector';
+const connectorTopics = Array.from({ length: 12 }, (_, index) => {
+  return `topic-${index + 1}`;
+});
+
+describe('Connector topics', () => {
+  const renderComponent = () => {
+    (useConnector as jest.Mock).mockImplementation(() => ({
+      data: {
+        ...connector,
+        topics: connectorTopics,
+      },
+    }));
+
+    return render(
+      <WithRoute path={clusterConnectConnectorTopicsPath()}>
+        <Topics />
+      </WithRoute>,
+      {
+        initialEntries: [
+          clusterConnectConnectorTopicsPath(
+            clusterName,
+            connectName,
+            connectorName
+          ),
+        ],
+      }
+    );
+  };
+
+  it('renders a collapsed topic table by default and expands on demand', async () => {
+    renderComponent();
+
+    expect(screen.getByText('topic-10')).toBeInTheDocument();
+    expect(screen.queryByText('topic-11')).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Show all 12 topics' })
+    ).toBeInTheDocument();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Show all 12 topics' })
+    );
+
+    expect(screen.getByText('topic-12')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Show less' })
+    ).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('button', { name: 'Show less' }));
+
+    expect(screen.queryByText('topic-11')).not.toBeInTheDocument();
+  });
+});

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

@@ -19,3 +19,7 @@ export const TagsWrapper = styled.div`
     }
   `}
 `;
+
+export const ToggleButtonWrapper = styled.div`
+  margin-top: 4px;
+`;

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

@@ -4,27 +4,53 @@ import { CellContext } from '@tanstack/react-table';
 import { MultiLineTag } from 'components/common/Tag/Tag.styled';
 import { ClusterNameRoute, clusterTopicPath } from 'lib/paths';
 import useAppParams from 'lib/hooks/useAppParams';
+import { Button } from 'components/common/Button/Button';
 
 import * as S from './TopicsCell.styled';
 
+const COLLAPSED_TOPICS_COUNT = 5;
+
 const TopicsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
   row,
 }) => {
   const { topics } = row.original;
   const { clusterName } = useAppParams<ClusterNameRoute>();
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const visibleTopics = isExpanded
+    ? topics
+    : topics?.slice(0, COLLAPSED_TOPICS_COUNT);
+
+  const hiddenTopicsCount = Math.max(
+    0,
+    (topics?.length ?? 0) - COLLAPSED_TOPICS_COUNT
+  );
 
   return (
-    <S.TagsWrapper>
-      {topics?.map((t) => {
-        const href = clusterTopicPath(clusterName, t);
-
-        return (
-          <MultiLineTag key={t} color="green">
-            <a href={href}>{t}</a>
-          </MultiLineTag>
-        );
-      })}
-    </S.TagsWrapper>
+    <>
+      <S.TagsWrapper>
+        {visibleTopics?.map((t) => {
+          const href = clusterTopicPath(clusterName, t);
+
+          return (
+            <MultiLineTag key={t} color="green">
+              <a href={href}>{t}</a>
+            </MultiLineTag>
+          );
+        })}
+      </S.TagsWrapper>
+      {hiddenTopicsCount > 0 && (
+        <S.ToggleButtonWrapper>
+          <Button
+            buttonType="text"
+            buttonSize="S"
+            onClick={() => setIsExpanded((prevState) => !prevState)}
+          >
+            {isExpanded ? 'Show less' : `Show ${hiddenTopicsCount} more`}
+          </Button>
+        </S.ToggleButtonWrapper>
+      )}
+    </>
   );
 };
 

frontend/src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/__tests__/TopicsCell.spec.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, WithRoute } from 'lib/testHelpers';
+import { clusterConnectorsPath } from 'lib/paths';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { connectors } from 'lib/fixtures/kafkaConnect';
+import { CellContext } from '@tanstack/react-table';
+import { FullConnectorInfo } from 'generated-sources';
+import TopicsCell from 'components/Connect/List/ConnectorsTable/connectorsColumns/cells/TopicsCell';
+
+const clusterName = 'local';
+const connectorTopics = Array.from({ length: 7 }, (_, index) => {
+  return `topic-${index + 1}`;
+});
+
+const cellProps = {
+  row: {
+    original: {
+      ...connectors[0],
+      topics: connectorTopics,
+    },
+  },
+} as CellContext<FullConnectorInfo, unknown>;
+
+describe('TopicsCell', () => {
+  const renderComponent = () =>
+    render(
+      <WithRoute path={clusterConnectorsPath()}>
+        <TopicsCell {...cellProps} />
+      </WithRoute>,
+      { initialEntries: [clusterConnectorsPath(clusterName)] }
+    );
+
+  it('renders a collapsed topic list by default and expands on demand', async () => {
+    renderComponent();
+
+    expect(screen.getByText('topic-5')).toBeInTheDocument();
+    expect(screen.queryByText('topic-6')).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Show 2 more' })
+    ).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('button', { name: 'Show 2 more' }));
+
+    expect(screen.getByText('topic-7')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Show less' })
+    ).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('button', { name: 'Show less' }));
+
+    expect(screen.queryByText('topic-6')).not.toBeInTheDocument();
+  });
+});