NAS-141025 / 27.0.0-BETA.1 / Remove the last of Angular Material

[AlexKarpov98]

Straggler sweep for Epic NAS-141021: removes the Angular Material that was left
after the feature-area and shared-infrastructure tickets, and drops the
dependency so it cannot creep back.

Stacked on #14098 (NAS-142357). Base is NAS-142357-3, not master.
That branch rehomes ix-code-editor, which still imports @angular/material
on master — removing the dependency before it lands would break the build.
GitHub will retarget this to master once #14098 merges.

Templates / TypeScript

• ix-errors held the last <mat-error>; it now renders <div class="error-message">.
  Its colour rule has to stay global (messages are injected via [innerHTML], so they
  carry no _ngcontent attribute and emulated component styles never reach them).
• test.directive.ts: dropped every mat-* case and every tn-* case from the
  tag→test-id switch. A parse of all templates confirms [ixTest] is never placed on a
  tn-* element — those take the library's own testId input — so both groups were dead.
  Only native tags plus ix-date remain.
• navigate-and-highlight.service.ts had live .mat-mdc-menu-panel / .mat-mdc-menu-item
  queries driving its FocusKeyManager arrow-key dance. Re-pointed at tn-menu's DOM
  (div.tn-menu[cdkMenu], which also carries CdkMenu's keydown host listener, and
  button.tn-menu-item). CdkMenu still reads the deprecated event.keyCode, so the
  existing keyCode patch stays necessary.
• editable.component.ts: removed four dead Material overlay selectors.
• Deleted ix-date-adapter.ts — a NativeDateAdapter subclass that was never provided
  anywhere — plus MatButtonModule / provideNativeDateAdapter() from main.ts and all
  15 Mat*Module global injections from setup-jest.ts.

Styles

No .mat-* / .mdc-* selectors and no --mat-* / --mdc-* custom properties remain.

• Deleted: _material-overrides.scss, _angular15.scss, _mat-card.scss,
  _mat-button-group.scss, and mixins/buttons.scss (its only mixin, stroked-button,
  was Material-only).
• Pruned in place: _tn-styles.scss (−577 lines, including the whole mat.* theme and
  typography layer), _fn-styles.scss, _egret_overrides.scss, mixins/cards.scss,
  _charts.scss, _dynamic-markdown.scss, and five component stylesheets.
• _material-reduction.scss → _globals.scss. It no longer contains any Material —
  just base typography, the .form-element rhythm, tooltips, the search-highlight pulse
  and two overlay z-indexes.

Worth a reviewer's eye: _material-overrides.scss defined MDC custom properties that
three non-Material consumers read. Those were re-pointed rather than dropped —
--mdc-dialog-subhead-font → var(--font-family-body), --mdc-icon-button-icon-color
→ var(--fg2). Likewise the old mat-tab-nav-panel highlight rule is now rooted on
[role='tabpanel'], which the plain <div> tab hosts carry since tn-tabs replaced it.

Dependency

@angular/material is removed from package.json, along with its two moduleNameMapper
entries in jest.config.cjs. Only the root workspace depended on it. @angular/cdk stays
— overlay, a11y, drag-drop, tree, and CdkMenu under tn-menu all use it.

@material-design-icons/svg also stays. It is the icon set, not the component library:
tn-icon renders from a sprite that yarn tn-icons generates, and the generator resolves
@material-design-icons/svg/filled/*.svg from webui's own node_modules. Eight of the 18
mat-* symbols in the sprite are demanded by @truenas/ui-components itself (tn-table
sort arrows, tn-select chevrons), so dropping it is a library-side change first.

Also removed

The new-feature-indicator directive, which was entirely unused — *ixNewFeatureIndicator
appeared in zero templates. Its wrapper component, service, interface and specs go with it,
along with the store plumbing that existed only to feed it: the shownNewIndicatorKeysUpdated
action, its reducer case, its entry in the saveUpdatedPreferences$ effect, and the
shownNewFeatureIndicatorKeys preference. Note this changes the shape of the preferences
blob written via auth.set_attribute — harmless, since it is an arbitrary JSON blob and
nothing reads the field, but flagging it.

Testing

• yarn build passes; styles.css is 45 KB (the Material theme was the bulk of the old
  global CSS).
• yarn lint and stylelint clean.
• yarn test:changed (126 tests) plus modules/forms|dialog|lists and
  store/preferences|dashboard as sanity slices — all green.

[bugclerk]

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

[codecov]

Codecov Report

❌ Patch coverage is 83.33333% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 89.07%. Comparing base (740e13d) to head (17f3911).
⚠️ Report is 1 commits behind head on NAS-142357-3.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...ate-and-interact/navigate-and-highlight.service.ts	83.33%	1 Missing ⚠️

Additional details and impacted files

@@               Coverage Diff                @@
##           NAS-142357-3   #14110      +/-   ##
================================================
+ Coverage         89.05%   89.07%   +0.02%     
================================================
  Files              1867     1863       -4     
  Lines             70072    69951     -121     
  Branches           9189     9163      -26     
================================================
- Hits              62402    62310      -92     
+ Misses             7670     7641      -29     

☔ 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.

[github-actions]

Two findings, both LOW. 🎉 Nothing here blocks — this is a clean landing for a sweep this wide.

Genuinely nice work on the parts that are easy to get wrong in a dependency-removal PR: the three non-Material consumers of MDC custom properties were re-pointed (--mdc-dialog-subhead-font → var(--font-family-body), --mdc-icon-button-icon-color → var(--fg2)) rather than left to resolve to nothing, and the <mat-error> → <div class="error-message"> swap correctly kept its colour rule global — the [innerHTML] messages carry no _ngcontent attribute, so a component-scoped rule really would never have reached them. ✅

I checked the two claims in the description that a reviewer can't take on faith, and both hold:

• The test.directive.ts switch really is dead. Every [ixTest] in the codebase resolves to a native tag, ix-date, or a component that already fell through to the default branch (ix-code-editor, ix-label, ix-table-pager-show-more). No tn-* element carries [ixTest], and ix-icon / ix-checkbox / ix-select no longer exist as elements at all — so no data-test value changes. 👍
• Nothing dangles after the SCSS deletions. No @angular/material import survives anywhere under src/, no --mat-* / --mdc-* custom property is read, no .mat-* / .mdc-* selector remains (only explanatory comments), and no file still imports material-reduction, material-overrides, angular15, mixins/buttons, or the two deleted components/mat-* partials. Build is green.

Two smaller things I specifically looked for and cleared rather than flagged: the body ix-checkbox ix-errors .mat-error { margin-top: 0 } rule dropped from _material-reduction.scss was already dead (ix-checkbox is gone), and the .sticky-top / .sticky-bottom menu rules had no remaining consumers.

The findings are inline:

• LOW — eslint.config.mjs:34: '@angular/material/*' doesn't match @angular/material/select/testing, the deep entrypoint the 15 removed harness imports used. '@angular/material/**' covers both depths unambiguously.
• LOW — navigate-and-highlight.service.ts:32: the .mat-mdc-menu-panel:has(.ix-highlight-target) { overflow: visible } rule was deleted rather than re-pointed at .tn-menu, unlike its mat-tab-nav-panel → [role='tabpanel'] sibling in the same file. Already inert on this branch, so nothing regresses — but it leaves the menu-highlight branch this service implements without its clipping fix.

[william-gr]

Nice job!

[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.