Add links between topics and Kafka Connect connectors

[Gleb-Shipilov]

Issue submitter TODO list

• I've searched for an already existing issues here
• I'm running a supported version of the application which is listed here and the feature is not present there

Is your proposal related to a problem?

No response

Describe the feature you're interested in

Prerequisites

• Currently it's possible to go to the topic page from Connectors grid
• I, as a Kafka UI user, want to be able to travel between topics and connectors in both directions, using the direct links in Kafka UI.

To Do

• If a topic has at least one link with source connectors, then on the left side of "Consumers" button display "Sink Connectors" button
• If a user chooses "Sink Connectors", display the grid of all sink connectors linked to the topic
• If a topic has at least one link with source connectors, then on the left side of "Consumers" button display "Source Connectors" button
• If a user chooses "Source Connectors", display the grid of all source connectors linked to the topic
• In both (source and sink) grids display the same parameters that are displayed in the main Connectors grid (../clusters/.../connectors..)
• To the Connector (.../connectors/<connector_name>) page add possibility to see linked topics as it is already implemented for Consumer Groups

Acceptance criteria

• AC1.1 (No Sink Connectors):

Given a topic that has no linked sink connectors.
When a user navigates to the topic's detail page (e.g., ../all-topics/<topic_name>).
Then the "Sink Connectors" button is not displayed.

• AC1.2 (With Sink Connectors):

Given a topic that has at least one linked sink connector.
When a user navigates to the topic's detail page (e.g., ../all-topics/<topic_name>).
Then a "Sink Connectors" button is displayed to the left of the "Consumers" button.
And the "Sink Connectors" button is clearly visible and clickable.

• AC2.1 (Selecting Sink Connectors):

Given a topic with at least one linked sink connector, and the user is on the topic's detail page where the "Sink Connectors" button is displayed.
When the user clicks on the "Sink Connectors" button.
Then a grid is displayed, containing all sink connectors that consume from the current topic.
And this grid replaces or becomes the primary view on the page.

• AC2.2 (Empty Sink Connectors Grid):

Given a topic with no linked sink connectors, but due to an unexpected scenario, the "Sink Connectors" button was present and clicked.
When the user clicks on the "Sink Connectors" button.
Then a grid is displayed, indicating that no sink connectors are linked to this topic (e.g., "No sink connectors found").

• AC3.1 (No Source Connectors):

Given a topic that has no linked source connectors.
When a user navigates to the topic's detail page (e.g., ../all-topics/<topic_name>).
Then the "Source Connectors" button is not displayed.

• AC3.2 (With Source Connectors):

Given a topic that has at least one linked source connector.
When a user navigates to the topic's detail page (e.g., ../all-topics/<topic_name>).
Then a "Source Connectors" button is displayed to the left of the "Consumers" button (and potentially to the left of the "Sink Connectors" button if both are present).
And the "Source Connectors" button is clearly visible and clickable.

• AC4.1 (Selecting Source Connectors):

Given a topic with at least one linked source connector, and the user is on the topic's detail page where the "Source Connectors" button is displayed.
When the user clicks on the "Source Connectors" button.
Then a grid is displayed, containing all source connectors that produce to the current topic.
And this grid replaces or becomes the primary view on the page.

• AC4.2 (Empty Source Connectors Grid):

Given a topic with no linked source connectors, but due to an unexpected scenario, the "Source Connectors" button was present and clicked.
When the user clicks on the "Source Connectors" button.
Then a grid is displayed, indicating that no source connectors are linked to this topic (e.g., "No source connectors found").

• AC5.1 (Sink Connector Grid Parameters):

Given a user is viewing the sink connectors grid for a specific topic (as per AC2.1).
When comparing the columns and parameters displayed in this grid to those in the main ../clusters/<cluster_name>/connectors grid.
Then all columns and parameters present in the main connectors grid (e.g., Name, Status, Type, Worker, etc.) are also present and displayed in the sink connectors grid.

• AC5.2 (Source Connector Grid Parameters):

Given a user is viewing the source connectors grid for a specific topic (as per AC4.1).
When comparing the columns and parameters displayed in this grid to those in the main ../clusters/<cluster_name>/connectors grid.
Then all columns and parameters present in the main connectors grid are also present and displayed in the source connectors grid.

• AC6.1 (Displaying Linked Topics):

Given a user navigates to a specific connector's details page (e.g., ../clusters/<cluster_name>/connectors/<connector_name>).
When the page loads.
Then a dedicated section or tab is clearly visible, listing the topics linked to this connector (whether it acts as a source or a sink).
And each listed topic is clickable, navigating the user to its respective topic detail page.

• AC6.2 (Handling No Linked Topics):

Given a user navigates to a specific connector's details page that has no linked topics.
When the page loads.
Then the "linked topics" section/tab is still present but clearly indicates that no topics are linked (e.g., "No linked topics found for this connector").

• AC6.3 (Consistency with Consumer Group Display):
  Given the existing implementation for displaying linked Consumer Groups on the topic page.
  When the linked topics are displayed on the connector page.
  Then the presentation, layout, and user experience for viewing linked topics are consistent with how linked Consumer Groups are currently displayed.

Describe alternatives you've considered

No response

Version you're running

1.2.0

Additional context

No response