NAS-143761 / 26.0.0-RC.1 / Keep the Hosts dialog usable when editing or adding a host (by AlexKarpov98)

[bugclerk]

Preview:

Screen.Recording.2026-09-15.at.13.35.05.mov

Change

Editing or adding a host from the NVMe-oF Hosts management dialog dropped the user back on the
Subsystems screen instead of returning them to the list.

The reported cause was already gone. In 26.0.0-RC.1 ManageHostsDialog.onAdd()/onEdit() called
this.dialogRef.close() before opening the slide-in — with a comment saying it was to stop the
dialog appearing behind the form. ManagePortsDialog never did this, which is exactly why Ports
behaved correctly. That call was removed in 08da727 when the slide-in became
FormSidePanelService.

What is still broken — and for both dialogs — is the layer underneath. That migration came with
the comment "the side panel … paints on top of this dialog's backdrop", but the premise was
already false: three weeks earlier e69bcee had added
.tn-side-panel__overlay { z-index: 999 !important } to _tn-styles.scss, dropping the panel below
the CDK overlay layer (1000). tn-side-panel portals its overlay to document.body, and
.cdk-overlay-container is a body sibling — so Edit / Add New opened the host form behind the
dialog's dark backdrop: invisible and click-blocked.

The container is a single element with a single z-index, so no one value can order the
panel correctly in both directions at once:

	at z-index: 1000	at z-index: 999 (before this PR)
Panel opened from an open dialog	panel on top ✅	panel buried under the dialog ❌
Dropdown / confirm dialog opened from the panel	hidden behind the panel ❌	on top ✅

So FormSidePanelContainerComponent now re-homes its portaled overlay into
OverlayContainer.getContainerElement(), where panel and CDK panes are siblings at the same
z-index and DOM order — i.e. open order — arbitrates. Both columns above become ✅.

• Scheduled with afterNextRender({ read: … }): the library's own body-append runs in the default
  mixedReadWrite phase, so the read phase is guaranteed to follow it in the same render cycle.
• The overlay is located via the data-tn-panel id the library puts on both the tn-side-panel
  host and the portaled overlay — the correlation it documents for exactly this.
• _tn-styles.scss keeps the 999 rule for the ~6 <tn-side-panel>s declared in templates
  (dataset-form, zvol-form, vm-wizard, …), plus a scoped rule restoring 1000 inside the container.

Two notes on scope: this fixes Ports identically, since it carries the same latent problem; and
the only other dialog that opens a side panel, session-expiring-dialog, closes itself first and
was never affected.

Testing

The appliance was unreachable, so the stacking was verified in a real browser against a synthetic
page built from the verbatim CDK and tn-side-panel CSS, probing with elementFromPoint:

• before — top element at the panel's centre is cdk-overlay-backdrop, panel not hit-testable;

• after — top element is tn-side-panel__panel, and a CDK pane appended later still sits above
  it.

• yarn test src/app/modules/slide-ins → 36 passing, src/app/pages/sharing/nvme-of → 155 passing

• tsc -p src/tsconfig.app.json clean; eslint and stylelint clean

• New spec in form-side-panel.service.spec.ts asserts the overlay lands in the CDK container
  after a pane that was already open — confirmed to fail when the fix is reverted

• expect(DialogRef.close).not.toHaveBeenCalled() added to the manage-hosts Add/Edit tests, pinning
  the originally reported regression directly

Heads-up for reviewers: node_modules had @truenas/ui-components at 0.1.57 against ~0.7.6 in
package.json; run yarn install before the specs or every tn-* spec fails.

Original PR: #14131

[bugclerk]

Automatic cherry-pick failed. Please resolve conflicts by running:

git reset --hard HEAD~1
git cherry-pick -x 0a5ce70304f72741d1d2906a9e846d97fb2b8cf5
git cherry-pick -x 1a3747023b8becf707d9fa1fe7b1c3ec3a82f1b3
git cherry-pick -x 9614fe6d6667b3e7758d28c446437786583980fd
git cherry-pick -x 2c0b892567b8ed86aea141594472c058e9b8a183

If the original PR was merged via a squash, you can just cherry-pick the squashed commit:

git reset --hard HEAD~1
git cherry-pick -x 17762cea615ee3c1e5a59bc06235f83c544bd400

[bugclerk]

Jira URL: https://ixsystems.atlassian.net/browse/NAS-143761

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (release/26.0.0-RC.1@944a225). Learn more about missing BASE report.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@                  Coverage Diff                   @@
##             release/26.0.0-RC.1   #14134   +/-   ##
======================================================
  Coverage                       ?   87.61%           
======================================================
  Files                          ?     1930           
  Lines                          ?    75206           
  Branches                       ?     8939           
======================================================
  Hits                           ?    65894           
  Misses                         ?     9312           
  Partials                       ?        0           

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

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[AlexKarpov98]

ported. @aervin

[bugclerk]

This PR has been merged and conversations have been locked.
If you would like to discuss more about this issue please use our forums or raise a Jira ticket.