Skip to content

Fix issue with side nav losing highlight for some routes - #18497

Merged
rak-phillip merged 3 commits into
rancher:masterfrom
rak-phillip:fix/#18495-side-nav-highlight
Jul 30, 2026
Merged

Fix issue with side nav losing highlight for some routes#18497
rak-phillip merged 3 commits into
rancher:masterfrom
rak-phillip:fix/#18495-side-nav-highlight

Conversation

@rak-phillip

@rak-phillip rak-phillip commented Jul 24, 2026

Copy link
Copy Markdown
Member

Summary

This resolves an issue where some routes would lose their highlight and would collapse the containing group when active.

Fixes #18495

Occurred changes and/or fixed issues

  • Add navResources option to type-map
  • Move isActive() logic into router utils

Technical notes summary

Two issues were identified during triage:

  1. Certain generic routes are expected to behave as children for resources. For example, listing Projects/Namespace has an active route of /c/local/explorer/projectsnamespaces, but creating a Project has an active route of /c/local/explorer/management.cattle.io.project/create#members. The create pages will never match a nav entry in this event.
  2. Some routes like creating cluster drivers have exact: true specified. In these cases, the list route is /c/_/manager/kontainerDriver and the create route is /c/_/manager/kontainerDriver/create. The create page is a direct child of, but will never match the nav item because it requires an exact route match to be marked as active.

Areas or cases that should be tested

The affected areas were identified during triage:

  • Cluster explorer
    • Projects/Namespace
      • Create Namespace
      • Create Project
    • Cluster and Project Members
      • Add
  • Cluster Management
    • Providers
      • Create Cluster Drivers
      • Create Node Drivers

Areas which could experience regressions

Changing exact to false for existing types could impact some behavior elsewhere. I wasn't able to identify where this could be problematic, but I think that we should be cautious of the change.

Screenshot/Video

Create Namespace

Before
image
After
image

Create Cluster Driver

Before
image
After
image

Checklist

  • The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
  • The PR has a Milestone
  • The PR template has been filled out
  • The PR has been self reviewed
  • The PR has a reviewer assigned
  • The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
  • The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes
  • The PR has been reviewed in terms of Accessibility
  • The PR has considered, and if applicable tested with, the three Global Roles Admin, Standard User and User Base

@marcelofukumoto

marcelofukumoto commented Jul 27, 2026

Copy link
Copy Markdown
Member
Before After
image image
image image

Recording:

record.webm

Just some tests done.

@marcelofukumoto marcelofukumoto left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some questions and Nit
From my automated and manual tests it seems good.

Comment thread shell/components/nav/Group.vue
Comment thread shell/config/product/explorer.js
@aalves08

Copy link
Copy Markdown
Member

@rak-phillip seems to be working as claimed, even with the new product registration API. Just missing Marcelo's comments.

`navResources` allows any given nav item to specify resource types that it owns, but does not link to directly. For example, the create page of a resource might not have a  nav entry of its own. When specified, these routes will ensure that the proper side nav item is highlighted when active.

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
This moves `isActive()` logic into router utils and adds logic for route claims and exact route matching.

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
@rak-phillip
rak-phillip force-pushed the fix/#18495-side-nav-highlight branch from 567e50b to 3ea17d3 Compare July 29, 2026 20:39
Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

@marcelofukumoto marcelofukumoto left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@rak-phillip
rak-phillip merged commit 0ad7ddb into rancher:master Jul 30, 2026
86 of 88 checks passed
@rak-phillip
rak-phillip deleted the fix/#18495-side-nav-highlight branch July 30, 2026 16:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Side nav collapses and loses selection indicator when creating some resources

3 participants