This is an automated email from the ASF dual-hosted git repository.
xuang7 pushed a commit to branch release/v1.2
in repository https://gitbox.apache.org/repos/asf/texera.git
The following commit(s) were added to refs/heads/release/v1.2 by this push:
new 21119c7691 fix(frontend, v1.2): highlight active About sidebar item
(#6303)
21119c7691 is described below
commit 21119c7691ff3c5cd231e3f3a252baf5460f9532
Author: Xinyuan Lin <[email protected]>
AuthorDate: Fri Jul 10 00:13:35 2026 -0700
fix(frontend, v1.2): highlight active About sidebar item (#6303)
### What changes were proposed in this PR?
Backport of apache/texera#6292 to `release/v1.2` (source commit
`04838a1ce7`; the original PR is still open on `main`).
Sidebar active-route highlighting (#3490): the **About** item is a plain
`nz-menu-item` with a `[routerLink]` but **no `nzMatchRouter`**, so —
unlike Your Work / Admin — it never enters ng-zorro's
`.ant-menu-item-selected` state and isn't highlighted when `/about` is
active. This adds `nzMatchRouter="true"` to it.
Not a clean cherry-pick — adapted to `release/v1.2`:
| main (#6292) | this backport |
| --- | --- |
| About item: add `nzMatchRouter="true"` | same |
| Feedback item: add `nzMatchRouter="true"` | dropped — `release/v1.2`
has no Feedback sidebar item |
| spec: About + Feedback + reference (Your Work) cases | Feedback case
dropped along with it |
### Any related issues, documentation, or discussions?
Backport of #6292 (which closes #3490 on `main`).
### How was this PR tested?
Unit tests (Vitest), run on `release/v1.2`:
```
corepack yarn ng test --watch=false
--include="**/dashboard.component.spec.ts"
```
→ **13/13 passing** (11 baseline + 2 new). Re-ran with the HTML fix
reverted: the new About case fails, so the spec pins the fix. Prettier
check clean on both files.
No `release/*` label is added — this PR *is* the backport.
### Was this PR authored or co-authored using generative AI tooling?
Generated-by: Claude Code (Fable 5)
Co-authored-by: Raja-Hamid <[email protected]>
---
.../dashboard/component/dashboard.component.html | 1 +
.../component/dashboard.component.spec.ts | 45 ++++++++++++++++++++++
2 files changed, 46 insertions(+)
diff --git a/frontend/src/app/dashboard/component/dashboard.component.html
b/frontend/src/app/dashboard/component/dashboard.component.html
index 9014ea37e5..326ba3d9da 100644
--- a/frontend/src/app/dashboard/component/dashboard.component.html
+++ b/frontend/src/app/dashboard/component/dashboard.component.html
@@ -193,6 +193,7 @@
*ngIf="sidebarTabs.about_enabled"
nz-menu-item
nz-tooltip
+ nzMatchRouter="true"
nzTooltipPlacement="right"
[routerLink]="ABOUT">
<span
diff --git a/frontend/src/app/dashboard/component/dashboard.component.spec.ts
b/frontend/src/app/dashboard/component/dashboard.component.spec.ts
index a53244b3cd..7a726a4921 100644
--- a/frontend/src/app/dashboard/component/dashboard.component.spec.ts
+++ b/frontend/src/app/dashboard/component/dashboard.component.spec.ts
@@ -286,4 +286,49 @@ describe("DashboardComponent", () => {
// 6 "Your Work" links + 4 admin links + 1 about link = 11
expect(fixture.debugElement.queryAll(By.directive(RouterLink)).length).toBe(11);
});
+
+ describe("sidebar active-route highlighting (#3490)", () => {
+ const fullSidebarTabs = {
+ hub_enabled: false,
+ home_enabled: true,
+ workflow_enabled: true,
+ dataset_enabled: true,
+ your_work_enabled: true,
+ projects_enabled: true,
+ workflows_enabled: true,
+ datasets_enabled: true,
+ compute_enabled: true,
+ quota_enabled: true,
+ forum_enabled: true,
+ about_enabled: true,
+ };
+
+ // Find a rendered nz-menu-item <li> by its visible label;
componentInstance is the
+ // NzMenuItemComponent, whose nzMatchRouter input decides whether it gets
the
+ // .ant-menu-item-selected highlight on its active route.
+ const menuItemByLabel = (label: string) =>
+ fixture.debugElement
+ .queryAll(By.css("li[nz-menu-item]"))
+ .find(de => (de.nativeElement.textContent || "").trim() === label);
+
+ beforeEach(() => {
+ (userServiceMock.isLogin as Mock).mockReturnValue(true);
+ component.isLogin = true;
+ component.isAdmin = true;
+ component.sidebarTabs = fullSidebarTabs;
+ fixture.detectChanges();
+ });
+
+ it("enables nzMatchRouter on the About item so it highlights when active",
() => {
+ const about = menuItemByLabel("About");
+ expect(about).toBeTruthy();
+ expect(about!.componentInstance.nzMatchRouter).toBe(true);
+ });
+
+ it("(reference) Your Work items already enable nzMatchRouter", () => {
+ const quota = menuItemByLabel("Quota");
+ expect(quota).toBeTruthy();
+ expect(quota!.componentInstance.nzMatchRouter).toBe(true);
+ });
+ });
});
