Collapse long connector topic lists

[rahulbsw]

Resolves #1306

Summary

• collapse long connector topic lists in the connectors table
• collapse long connector topic lists on the connector topics details page
• add expand-and-collapse coverage for both views

Testing

• pnpm exec tsc --noEmit
• pnpm exec eslint src/components/Connect/Details/Topics/Topics.tsx src/components/Connect/Details/Topics/Topics.styled.ts src/components/Connect/Details/Topics/tests/Topics.spec.tsx src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/TopicsCell.tsx src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/TopicsCell.styled.ts src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/tests/TopicsCell.spec.tsx
• pnpm exec jest --runInBand --runTestsByPath src/components/Connect/Details/Topics/tests/Topics.spec.tsx src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/tests/TopicsCell.spec.tsx

Summary by CodeRabbit

• New Features

  • Topics lists in multiple UI locations now collapse by default with a toggle to "show all" or "show less", improving readability for long topic lists.

• Tests

  • Added comprehensive tests covering default collapsed state, toggle behavior, threshold cases (no toggle when at limit), and empty-state handling.

[coderabbitai]

Caution

Review failed

An error occurred during the review process. Please try again later.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

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

34-53: ⚡ Quick win

Consider adding edge-case test coverage.

Similar to the Topics test, consider adding tests for:

• When topics.length <= COLLAPSED_TOPICS_COUNT (button should not appear)
• When topics is empty or undefined

This would ensure the component handles all states gracefully.

🧪 Proposed additional test cases

it('does not show toggle button when topics count is below threshold', () => {
  const cellPropsSmall = {
    row: {
      original: {
        ...connectors[0],
        topics: ['topic-1', 'topic-2', 'topic-3'],
      },
    },
  } as CellContext<FullConnectorInfo, unknown>;

  render(
    <WithRoute path={clusterConnectorsPath()}>
      <TopicsCell {...cellPropsSmall} />
    </WithRoute>,
    { initialEntries: [clusterConnectorsPath(clusterName)] }
  );

  expect(screen.getByText('topic-1')).toBeInTheDocument();
  expect(screen.queryByRole('button')).not.toBeInTheDocument();
});

it('handles undefined topics gracefully', () => {
  const cellPropsEmpty = {
    row: {
      original: {
        ...connectors[0],
        topics: undefined,
      },
    },
  } as CellContext<FullConnectorInfo, unknown>;

  render(
    <WithRoute path={clusterConnectorsPath()}>
      <TopicsCell {...cellPropsEmpty} />
    </WithRoute>,
    { initialEntries: [clusterConnectorsPath(clusterName)] }
  );

  expect(screen.queryByRole('button')).not.toBeInTheDocument();
});

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@frontend/src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/__tests__/TopicsCell.spec.tsx`
around lines 34 - 53, Add edge-case tests for TopicsCell: when topics.length <=
COLLAPSED_TOPICS_COUNT and when topics is undefined/empty. In the
TopicsCell.spec.tsx add two tests using the existing render helper (or
renderComponent) that render TopicsCell with row.original.topics set to a short
array (<= COLLAPSED_TOPICS_COUNT) and to undefined/[] and assert that topic
items render but the toggle button (role='button' or label 'Show X more') does
not exist; reference TopicsCell and COLLAPSED_TOPICS_COUNT to construct the test
inputs and assertions.

frontend/src/components/Connect/Details/Topics/__tests__/Topics.spec.tsx (1)

46-67: ⚡ Quick win

Consider adding edge-case test coverage.

The current test validates the happy path well, but consider adding tests for:

• When topics.length <= COLLAPSED_TOPICS_COUNT (button should not appear)
• When topics is empty or undefined

These would improve confidence that the component handles all states correctly.

🧪 Proposed additional test cases

it('does not show toggle button when topics count is below threshold', () => {
  (useConnector as jest.Mock).mockImplementation(() => ({
    data: {
      ...connector,
      topics: Array.from({ length: 5 }, (_, i) => `topic-${i + 1}`),
    },
  }));

  render(
    <WithRoute path={clusterConnectConnectorTopicsPath()}>
      <Topics />
    </WithRoute>,
    {
      initialEntries: [
        clusterConnectConnectorTopicsPath(
          clusterName,
          connectName,
          connectorName
        ),
      ],
    }
  );

  expect(screen.queryByRole('button')).not.toBeInTheDocument();
});

it('handles empty topics gracefully', () => {
  (useConnector as jest.Mock).mockImplementation(() => ({
    data: {
      ...connector,
      topics: [],
    },
  }));

  render(
    <WithRoute path={clusterConnectConnectorTopicsPath()}>
      <Topics />
    </WithRoute>,
    {
      initialEntries: [
        clusterConnectConnectorTopicsPath(
          clusterName,
          connectName,
          connectorName
        ),
      ],
    }
  );

  expect(screen.getByText('No topics found')).toBeInTheDocument();
  expect(screen.queryByRole('button')).not.toBeInTheDocument();
});

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/Connect/Details/Topics/__tests__/Topics.spec.tsx`
around lines 46 - 67, Add two edge-case tests for the Topics component: (1)
verify that when topics.length <= COLLAPSED_TOPICS_COUNT the toggle button is
not rendered by mocking useConnector to return a small topics array and
asserting no button appears (reference: Topics component and
COLLAPSED_TOPICS_COUNT, test file Topics.spec.tsx), and (2) verify that when
topics is empty or undefined the component renders the empty-state text (e.g.,
"No topics found") and does not render the toggle button by mocking useConnector
to return topics: [] or undefined and asserting the empty-state message and
absence of the button (reference: useConnector mock and Topics component).

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@frontend/src/components/Connect/Details/Topics/__tests__/Topics.spec.tsx`:
- Around line 46-67: Add two edge-case tests for the Topics component: (1)
verify that when topics.length <= COLLAPSED_TOPICS_COUNT the toggle button is
not rendered by mocking useConnector to return a small topics array and
asserting no button appears (reference: Topics component and
COLLAPSED_TOPICS_COUNT, test file Topics.spec.tsx), and (2) verify that when
topics is empty or undefined the component renders the empty-state text (e.g.,
"No topics found") and does not render the toggle button by mocking useConnector
to return topics: [] or undefined and asserting the empty-state message and
absence of the button (reference: useConnector mock and Topics component).

In
`@frontend/src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/__tests__/TopicsCell.spec.tsx`:
- Around line 34-53: Add edge-case tests for TopicsCell: when topics.length <=
COLLAPSED_TOPICS_COUNT and when topics is undefined/empty. In the
TopicsCell.spec.tsx add two tests using the existing render helper (or
renderComponent) that render TopicsCell with row.original.topics set to a short
array (<= COLLAPSED_TOPICS_COUNT) and to undefined/[] and assert that topic
items render but the toggle button (role='button' or label 'Show X more') does
not exist; reference TopicsCell and COLLAPSED_TOPICS_COUNT to construct the test
inputs and assertions.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c6bd91a6-7a13-4a54-a646-c186b1539ac6

📥 Commits

Reviewing files that changed from the base of the PR and between 4bf06dd and ccd05fc.

📒 Files selected for processing (6)

• frontend/src/components/Connect/Details/Topics/Topics.styled.ts
• frontend/src/components/Connect/Details/Topics/Topics.tsx
• frontend/src/components/Connect/Details/Topics/__tests__/Topics.spec.tsx
• frontend/src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/TopicsCell.styled.ts
• frontend/src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/TopicsCell.tsx
• frontend/src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/__tests__/TopicsCell.spec.tsx