Fix remaining RxJS unbound-operator call sites in sidenav

[fpigeonjr]

Description

Fixes the last two remaining RxJS 5 "unbound operator" call sites in the library, both in MdSidenavContainer (src/ui-kit/experimental/patterns/layout/components/sidenav/sidenav.ts):

• Enabling transitions after _sidenavs.changes emits (a sidenav is added/removed dynamically)
• Re-validating drawers after a sidenav's onAlignChanged emits (a drawer's align changes at runtime)

Both used the form first.call(this._ngZone.onMicrotaskEmpty).subscribe(...). Under RxJS 7 (this repo declares rxjs >=7.5.0), an operator imported from rxjs/operators is a factory that returns an OperatorFunction, so calling it with .call(observable) returns a function, not an Observable — the chained .subscribe(...) then throws TypeError: ...subscribe is not a function at runtime.

Unlike the three sites already fixed in #655 and #660, these two are not dead code: they sit inside subscribe callbacks that only run when a sidenav is added/removed dynamically or a drawer's align changes at runtime, so static sidenav usage never reached them — which is also why #660 covered this file to ~85% without tripping either one.

Converted both to observable.pipe(first()).subscribe(...).

Also adds an ESLint no-restricted-syntax rule banning the <identifier>.call(observable).subscribe(...) shape, so this defect class can't silently regress. The selector is scoped tightly enough that it doesn't flag unrelated .call() usage elsewhere in the codebase (Object.prototype.toString.call, Array.prototype.slice.call, a plain callback's callback.call(context, ...args)), all confirmed clean via a targeted eslint run. Verified the rule fires as an error against a deliberately reintroduced violation, then removed the scratch fixture.

Because the repo now has zero violations of the pattern, eslint-baseline.json did not need to move (warnings actually measured lower: 1575 vs. the 1619 root baseline ceiling). coverage-floor.json is untouched; measured coverage is above the floor on every metric.

Motivation and Context

Closes #661

Type of Change (Select One and Apply Label)

• Bug fix (non-breaking change which fixes an issue) → Apply bugfix label
• New feature (non-breaking change which adds functionality) → Apply enhancement label
• Breaking change (fix or feature that would cause existing functionality to change) → Apply breaking label
• Documentation / configuration update → Apply maintenance label

How to Test

1. npm ci && npm ci --prefix test-app
2. npm run format:check — expect pass
3. npm run lint — expect pass (root warnings 1575 ≤ baseline 1619, 0 errors)
4. cd test-app && npm run lint — expect pass (4 warnings ≤ baseline 4, 0 errors)
5. cd test-app && npm test — expect all specs green, including the three new specs in sidenav.spec.ts covering: a dynamically added sidenav (enables transitions once the microtask queue empties), a dynamically removed sidenav, and a runtime align change (re-validates drawers without throwing)
6. npm run coverage:check — expect pass, coverage-floor.json unchanged
7. cd test-app && npm run build — expect a clean Angular build

Expected result: All commands above exit 0. Before this fix, adding/removing a sidenav dynamically or changing a drawer's align at runtime under RxJS 7 would throw TypeError: ...subscribe is not a function from inside MdSidenavContainer; after the fix these paths run without throwing.

Screenshots (if appropriate)

N/A — backend/logic changes only (no visual changes).

Checklist

• Branch name follows convention (e.g. gh-<number>-<slug>)
• PR title starts with a verb in the imperative mood
• I have self-reviewed my own code
• format:check passes (npm run format:check)
• lint passes (npm run lint)
• build passes (cd test-app && npm run build)
• Tests pass and coverage is reported (cd test-app && npm test)
• If this change requires a documentation update, I have updated it accordingly
• If there are dependent changes, they have been merged and published in downstream modules

[Copilot]

🟡 Changes recommended

The newly added async specs use await Promise.resolve() (and include an outdated comment) where fixture.whenStable() is the more reliable, idiomatic way to wait for NgZone stability, reducing flakiness risk.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Fixes the remaining RxJS 5-style “unbound operator” usages in the experimental sidenav container by switching to RxJS 7+ pipe(...) operator usage, adds regression coverage in the sidenav specs, and introduces an ESLint guard to prevent reintroducing the problematic .call(observable).subscribe(...) pattern.

Changes:

• Replace first.call(this._ngZone.onMicrotaskEmpty) with this._ngZone.onMicrotaskEmpty.pipe(first()) in MdSidenavContainer.
• Add unit specs covering dynamic sidenav add/remove and runtime align changes to exercise the previously-unreached code paths.
• Add an ESLint no-restricted-syntax rule to error on the unbound-operator call shape.

File summaries

File	Description
src/ui-kit/experimental/patterns/layout/components/sidenav/sidenav.ts	Converts two remaining unbound-operator call sites to pipe(first()) to be compatible with RxJS 7+.
src/ui-kit/experimental/patterns/layout/components/sidenav/sidenav.spec.ts	Adds tests for dynamic sidenav changes and align changes to cover the fixed paths and prevent regression.
eslint.config.mjs	Adds a restricted-syntax selector to block reintroduction of the unbound-operator .call(...).subscribe(...) pattern.

Review details

Suppressed comments (3)

src/ui-kit/experimental/patterns/layout/components/sidenav/sidenav.spec.ts:260

• await Promise.resolve() does not guarantee the Angular fixture is stable (it only schedules one microtask). Use await fixture.whenStable() to ensure NgZone.onMicrotaskEmpty has a chance to emit and to reduce test flakiness.

    await Promise.resolve();

src/ui-kit/experimental/patterns/layout/components/sidenav/sidenav.spec.ts:267

• Same as above: prefer await fixture.whenStable() over await Promise.resolve() when the intent is to wait for zone microtasks to flush / onMicrotaskEmpty to run.

    await Promise.resolve();

src/ui-kit/experimental/patterns/layout/components/sidenav/sidenav.spec.ts:285

• The comment references the pre-fix first(this._ngZone.onMicrotaskEmpty) form, but the implementation is now onMicrotaskEmpty.pipe(first()); also, use fixture.whenStable() to reliably wait for the microtask-empty callback rather than a single resolved Promise.

    // The container waits for the microtask queue to be empty (via
    // first(this._ngZone.onMicrotaskEmpty)) before re-validating, since both
    // drawers may be swapping sides at the same time.
    await Promise.resolve();

• Files reviewed: 3/3 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.