Improve navigation between Kafka Clusters (part 2)

[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

Kafka UI users can have multiple Kafka clusters.
Currently, navigation between clusters has some inconveniences. For example, users can't understand which cluster's artifacts (topics, consumers, connectors, etc.) they are exploring.
If a user is exploring Kafka topics, for instance, then "Topics" will be highlighted for all Kafka clusters.
To understand which Kafka Cluster is being explored, users need to check the URL of the current page.

I, as a Kafka UI user, want to clearly see in Kafka UI which Kafka cluster's artifacts I am exploring.

To do

1. Highlight the name of the cluster whose artifacts a user is exploring.
2. Highlight the artifact name (e.g., Topics) only for the cluster that a user is exploring.
3. When a user starts exploring a cluster, move its section to the top of the left sidebar.
4. To help users understand which cluster they are exploring, when the left sidebar is closed, display the cluster name in the page titles (e.g., ' Topics', 'Kafka cluster name> Connectors').
5. When a user opens a Kafka UI page from link (e.g. 'Topics'), expand the menu of the Kafka cluster, which is being explored

Acceptance criteria

Scenario 1: Highlighting the active cluster and its specific artifact category in the sidebar.

Given

• A user is viewing the Kafka UI dashboard with multiple clusters configured in the left sidebar.
• The user navigates to a specific artifact page (e.g., Topics, Consumers, Connectors) for a particular cluster.

When

The user is actively viewing artifacts for a specific Kafka cluster (e.g., ClusterA/Topics).

Then

• The name of the active cluster (ClusterA) in the left sidebar must be visually highlighted (e.g., different background, bold text, distinct color) to clearly indicate it's the currently explored cluster.
• Within the active cluster's section in the left sidebar, the name of the specific artifact category (Topics) the user is exploring must be visually highlighted, while other artifact categories for that cluster and all artifact categories for other clusters remain un-highlighted.
• The section of the active cluster (ClusterA and its artifact categories) must be moved to the top of the left sidebar, above all other clusters, ensuring immediate visibility.

Scenario 2: Displaying the active cluster name in page titles when the sidebar is closed.

Given

• A user is actively exploring artifacts of a specific Kafka cluster (e.g., ClusterB/Connectors).
• The left sidebar is currently closed or hidden.

When

The user is on an artifact page (e.g., Connectors page) for a specific cluster.

Then

• The browser's page title (in the browser tab/window) must clearly display the name of the active Kafka cluster along with the artifact category (e.g., "ClusterB Connectors" or "ClusterB - Connectors").
• This behavior must be consistent across all artifact pages (Topics, Consumers, Connectors, etc.) when the sidebar is closed.

Scenario 3: Maintaining correct highlighting and order upon navigation within the same cluster.

Given

• A user is actively exploring artifacts of ClusterC (e.g., ClusterC/Topics).
• ClusterC is highlighted and at the top of the sidebar, and "Topics" within ClusterC is highlighted.

When

The user navigates to a different artifact category within the same cluster (ClusterC/Consumers).

Then

• ClusterC must remain highlighted and at the top of the left sidebar.
• The "Topics" highlight within ClusterC must be removed.
• The "Consumers" highlight within ClusterC must be applied.
• The page title must update to reflect the new artifact category (e.g., "ClusterC Consumers").

Scenario 4: Correctly updating highlighting and order upon navigating to a different cluster.

Given

• A user is actively exploring artifacts of ClusterD (e.g., ClusterD/Topics).
• ClusterD is highlighted and at the top of the sidebar, and "Topics" within ClusterD is highlighted.

When

The user navigates to an artifact category of a different cluster (e.g., ClusterE/Connectors).

Then

• The highlighting for ClusterD and "Topics" must be removed.
• ClusterE must become highlighted and move to the top of the left sidebar.
• The "Connectors" highlight within ClusterE must be applied.
• The page title must update to reflect the new cluster and artifact category (e.g., "ClusterE Connectors").

Scenario 5: Expanding Kafka section.

Given

• A user has a link to a Kafka UI page (e.g. 'Topics' of a cluster)

When

The user navigates to Topics of the Kafka cluster

Then

• The section of the cluster in the left sidebar is expanded

Describe alternatives you've considered

No response

Version you're running

1.2.0

Additional context

No response