fix(menu): highlight active nav tab in non-English locales by rusackas · Pull Request #41183 · apache/superset

rusackas · 2026-06-18T05:43:44Z

SUMMARY

The top navigation bar highlights the active tab by matching the current route against the menu item keys. Those keys were the menu items' displayed labels, while the active-tab matcher compared against hardcoded English strings ("Dashboards", "Charts", "SQL", …). In any non-English locale the displayed label is translated, so it never matched the English comparison string and no tab was highlighted.

This is a systemic i18n bug — it affects every language whose menu translations differ from English, not just Russian (reported in #36403).

Fix: key each menu item by its stable Flask-AppBuilder name (the internal view/category identifier, which is locale-independent) instead of its localized label, and match the active tab against those same names. name falls back to label when absent, so operator-defined custom menu entries keep working.

The change is in superset-frontend/src/features/home/Menu.tsx:

buildMenuItem now uses key: name ?? label for top-level entries.
The route → active-tab effect sets the stable names (Dashboards, Charts, Datasets, SQL Lab) instead of English labels. As a bonus this decouples the Datasets tab from the semantic-layer label override.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before — Russian locale, on the Dashboards page, the Dashboards tab is not highlighted.
After — the active tab is highlighted in every language.

(See the screenshots in #36403 for the broken-vs-working comparison.)

TESTING INSTRUCTIONS

Set two languages in superset_config.py:

LANGUAGES = {
    "en": {"flag": "us", "name": "English"},
    "ru": {"flag": "ru", "name": "Russian"},
}

Switch the UI language to Russian.
Open the Dashboards (or Charts / Datasets / SQL Lab) page.
Confirm the corresponding top-nav tab is highlighted as active.

Automated coverage added in Menu.test.tsx:

Highlights the active top-level tab on a matching route (English) — regression guard.
Highlights the active top-level tab when the label is localized.
Highlights the active SQL submenu tab when the label is localized.

npx jest src/features/home/Menu.test.tsx

ADDITIONAL INFORMATION

Has associated issue: Fixes Active menu item not highlighted when using Russian language #36403
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

🤖 Generated with Claude Code

bito-code-review · 2026-06-18T05:43:53Z

Code Review Agent Run #e666b5

Actionable Suggestions - 0

Additional Suggestions - 1

superset-frontend/src/features/home/Menu.test.tsx - 1
- Missing test for Datasets route · Line 817-817
  
  The three regression tests cover Dashboards and SQL Lab routes but omit Datasets. Consider adding a test for `/tablemodelview/list/` (MenuKeys.Datasets) to complete route coverage.

Review Details

Files reviewed - 4 · Commit Range: 5342d96..e27418c
- superset-frontend/src/features/home/Menu.test.tsx
- superset-frontend/src/features/home/Menu.tsx
- superset/tags/models.py
- tests/unit_tests/tags/models_test.py
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful
- MyPy (Static Code Analysis) - ✔︎ Successful
- Astral Ruff (Static Code Analysis) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

netlify · 2026-06-18T05:45:31Z

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	`27c0736`
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/6a338e7e8dbe730008fcca77
😎 Deploy Preview	https://deploy-preview-41183--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

bito-code-review · 2026-06-18T05:50:19Z

The flagged issue regarding key collisions in the navigation menu is correct. Using name ?? label as the key causes a collision when a parent menu item's name matches a child item's label (e.g., 'SQL Lab').

To resolve this, you should ensure keys are unique by namespacing them, for example by incorporating the parent's name or a unique identifier into the child's key. In superset-frontend/src/features/home/Menu.tsx, you can update the buildMenuItem function to generate a unique key for children, such as key: parentName ? ${parentName}-${key} : key.

I have checked the other comments on this PR, and there are no additional actionable review comments to address. Would you like me to proceed with implementing this fix in Menu.tsx?

superset-frontend/src/features/home/Menu.tsx

}: MenuObjectProps): MenuItem => {
    // Key items by the stable FAB `name` so active-tab matching is independent
    // of the localized label. Fall back to the label when no name is provided.
    const key = name ?? label;
    if (url && isFrontendRoute) {
      return {
        key: parentName ? `${parentName}-${key}` : key,
        label: (

The top navigation highlighted the active tab by matching the current route against hardcoded English strings ("Dashboards", "Charts", "SQL", etc.) while menu items were keyed by their localized labels. In any non-English locale the localized label never matched the English key, so no tab was highlighted (issue #36403). Key each menu item by its stable Flask-AppBuilder `name` (which is locale-independent) instead of its displayed label, and match the active tab against those same names. Highlighting now works regardless of the selected interface language. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

The SQL Editor child is labeled "SQL Lab" and sits under the "SQL Lab" category, so keying the child by its label collided with the parent key. Key children by their stable FAB `name` (falling back to the label) so AntD menu selection/open-state stays unambiguous. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

codecov · 2026-06-18T06:31:23Z

Codecov Report

❌ Patch coverage is 66.66667% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 64.31%. Comparing base (ae0b1f0) to head (27c0736).

Files with missing lines	Patch %	Lines
superset-frontend/src/features/home/Menu.tsx	66.66%	2 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #41183   +/-   ##
=======================================
  Coverage   64.31%   64.31%           
=======================================
  Files        2651     2651           
  Lines      144773   144775    +2     
  Branches    33407    33409    +2     
=======================================
+ Hits        93111    93118    +7     
+ Misses      49992    49987    -5     
  Partials     1670     1670

Flag	Coverage Δ
javascript	`68.46% <66.66%> (+<0.01%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

bito-code-review · 2026-06-18T09:28:57Z

Code Review Agent Run #66af40

Actionable Suggestions - 0

Review Details

Files reviewed - 2 · Commit Range: d1fb926..27c0736
- superset-frontend/src/features/home/Menu.test.tsx
- superset-frontend/src/features/home/Menu.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

pull-request-size Bot added the size/L label Jun 18, 2026

dosubot Bot added the i18n Namespace | Anything related to localization label Jun 18, 2026

github-actions Bot removed the i18n Namespace | Anything related to localization label Jun 18, 2026

codeant-ai-for-open-source Bot reviewed Jun 18, 2026

View reviewed changes

Comment thread superset-frontend/src/features/home/Menu.tsx

rusackas force-pushed the fix/36403-localized-menu-highlight branch from e27418c to d1fb926 Compare June 18, 2026 06:20

rusackas requested review from EnxDev, kgabryje and msyavuz June 18, 2026 18:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(menu): highlight active nav tab in non-English locales#41183

fix(menu): highlight active nav tab in non-English locales#41183
rusackas wants to merge 2 commits into
masterfrom
fix/36403-localized-menu-highlight

rusackas commented Jun 18, 2026

Uh oh!

bito-code-review Bot commented Jun 18, 2026 •

edited

Loading

Code Review Agent Run #e666b5

Uh oh!

netlify Bot commented Jun 18, 2026 •

edited

Loading

Uh oh!

Uh oh!

bito-code-review Bot commented Jun 18, 2026

Uh oh!

codecov Bot commented Jun 18, 2026

Uh oh!

bito-code-review Bot commented Jun 18, 2026 •

edited

Loading

Code Review Agent Run #66af40

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

rusackas commented Jun 18, 2026

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

bito-code-review Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #e666b5

Uh oh!

netlify Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for superset-docs-preview ready!

Uh oh!

Uh oh!

bito-code-review Bot commented Jun 18, 2026

Uh oh!

codecov Bot commented Jun 18, 2026

Codecov Report

Uh oh!

bito-code-review Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #66af40

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

bito-code-review Bot commented Jun 18, 2026 •

edited

Loading

netlify Bot commented Jun 18, 2026 •

edited

Loading

bito-code-review Bot commented Jun 18, 2026 •

edited

Loading