CTM-436 Upgrade Angular 19 → 20 and remove Clarity Design System

[LizBaldo]

JIRA Ticket: https://broadworkbench.atlassian.net/browse/CTM-401

• Bump all @angular/* and @angular-devkit/* packages to ^20.0.0
• Remove @clr/angular, @cds/core, @clr/icons (incompatible with Angular 20)
• Replace clr-icon/clr-tooltip with mat-icon/matTooltip throughout all templates
• Update JobStatusIcon enum to use Material icon names (e.g. check_circle, error, sync)
• Remove Clarity CSS/JS from angular.json build config; add Material tooltip styles to styles.scss
• Export MatIconModule and MatTooltipModule from SharedModule for test modules
• Replace TestBed.get() with TestBed.inject() (Angular 20 breaking change)
• Update all spec files to use mat-icon selectors and textContent assertions
• All 103 tests pass

[Copilot]

Pull request overview

Upgrades the UI to Angular 20 while removing the Clarity Design System dependency, migrating icons/tooltips to Angular Material, and updating tests to match Angular 20 API changes.

Changes:

• Bump Angular/framework deps to ^20.0.0 and remove Clarity packages/assets.
• Replace clr-icon / clr-tooltip usage across templates with mat-icon / matTooltip, including updating JobStatusIcon values.
• Update unit tests for Angular 20 (TestBed.inject) and new icon/toolip DOM expectations.

Reviewed changes

Copilot reviewed 33 out of 34 changed files in this pull request and generated 26 comments.

Show a summary per file

File	Description
ui/src/styles.scss	Removes Clarity tooltip/icon styling and adds Material tooltip/icon class styling.
ui/src/app/sign-in/sign-in-redirect-component.spec.ts	Updates TestBed.get() to TestBed.inject().
ui/src/app/shared/shared.module.ts	Removes Clarity modules; adds/exports Material tooltip/icon modules for app/tests.
ui/src/app/shared/filter-header/filter-header.component.spec.ts	Drops Clarity modules from test setup.
ui/src/app/shared/filter-header/filter-header.component.html	Migrates filter header icons/tooltips from Clarity to Material.
ui/src/app/shared/datetime/datetime.component.html	Replaces Clarity tooltip wrapper with matTooltip.
ui/src/app/shared/common.ts	Updates status-to-icon mapping from Clarity shapes to Material icon names.
ui/src/app/job-list/table/table.component.spec.ts	Updates test DOM queries/assertions for mat-icon status rendering.
ui/src/app/job-list/table/table.component.html	Migrates inline filter/status tooltip UI from Clarity to Material.
ui/src/app/job-list/table/bulk-edit/bulk-edit.component.html	Replaces Clarity icon with Material cancel.
ui/src/app/job-list/job-list.module.ts	Removes Clarity imports from module.
ui/src/app/job-list/job-list.component.spec.ts	Removes Clarity modules and updates TestBed injection API usage.
ui/src/app/job-details/tabs/tabs.component.spec.ts	Removes Clarity modules; updates icon assertions and TestBed injection API usage.
ui/src/app/job-details/tabs/tabs.component.html	Migrates task/shard status and menu icons/tooltips from Clarity to Material.
ui/src/app/job-details/tabs/scattered-attempts/scattered-attempts.component.html	Migrates shard status/cached indicators to Material icons/tooltips.
ui/src/app/job-details/panels/panels.component.spec.ts	Adjusts assertions to account for mat-icon text content in headers.
ui/src/app/job-details/panels/panels.component.html	Migrates header/status/action icons and tooltips from Clarity to Material.
ui/src/app/job-details/job-details.module.ts	Removes Clarity imports from module.
ui/src/app/job-details/job-details.component.spec.ts	Removes Clarity modules and updates TestBed injection API usage.
ui/src/app/job-details/common/debug-icons/debug-icons.component.spec.ts	Updates selectors/assertions after Clarity icon removal; updates TestBed injection API usage.
ui/src/app/job-details/common/debug-icons/debug-icons.component.html	Migrates debug/log/dir/compute icons & tooltips from Clarity to Material.
ui/src/app/job-details/common/attempt/attempt.component.html	Migrates attempt row icons/tooltips from Clarity to Material.
ui/src/app/dashboard/total-summary/total-summary.component.spec.ts	Drops Clarity modules from test setup.
ui/src/app/dashboard/total-summary/total-summary.component.html	Migrates dashboard summary status icons to Material.
ui/src/app/dashboard/grouped-summary/grouped-summary.component.spec.ts	Drops Clarity modules from test setup.
ui/src/app/dashboard/grouped-summary/grouped-summary.component.html	Migrates grouped summary header/status icons and arrow icon to Material.
ui/src/app/dashboard/dashboard.module.ts	Removes Clarity modules; adds Material icon/tooltip modules.
ui/src/app/dashboard/dashboard.component.spec.ts	Drops Clarity modules; updates TestBed injection API usage.
ui/src/app/app.module.ts	Removes Clarity modules from root module.
ui/src/app/app.component.spec.ts	Drops Clarity module; updates TestBed injection API usage.
ui/package.json	Bumps Angular packages to ^20.0.0, removes Clarity deps, updates related deps.
ui/angular.json	Removes Clarity CSS/JS assets from build configuration.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 33 out of 34 changed files in this pull request and generated 10 comments.

Comments suppressed due to low confidence (1)

.circleci/config.yml:69

• CircleCI caching is still keyed only on ui/package.json, but dependency resolution is now driven by yarn.lock. If yarn.lock changes without package.json changing, CI may restore an incompatible node_modules cache and produce flaky builds. Include ui/yarn.lock in the cache key checksum (and consider also caching Yarn’s download cache if used) to keep installs deterministic.

            cd ui
            yarn install
      - save_cache:
          key: node-modules-{{ .Branch }}--{{ checksum "ui/package.json" }}
          paths:
            - "ui/node_modules"

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 37 out of 38 changed files in this pull request and generated 12 comments.

Comments suppressed due to low confidence (1)

ui/src/app/dashboard/total-summary/total-summary.component.spec.ts:46

• This spec no longer imports Clarity modules, but the component template now renders . The TestBed module here does not import MatIconModule (or SharedModule which exports it), so the test will fail template compilation unless MatIconModule/SharedModule is added to the imports.

      imports: [
        CommonModule,
        MatCardModule,
        MatTableModule,
        RouterTestingModule,
      ],

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 41 out of 42 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The PR description lists Angular/Clarity upgrade steps, but this diff also bumps angular-oauth2-oidc from ^14 to ^20. Since this is a major dependency upgrade that can introduce breaking changes, please either (a) call it out in the PR description/migration notes or (b) justify why it’s required for Angular 20 compatibility and confirm any necessary config changes were made.

[LizBaldo]

angular-oauth2-oidc follows Angular's major version numbering convention — v14 is compatible with Angular 14, v20 with Angular 20. The bump from ^14 to ^20 is required to satisfy the library's Angular peer dependency; without it, the install would fail with peer dependency conflicts. No configuration changes were needed as the library's API and usage in this project remain unchanged between these versions.

[aednichols]

Seems reasonable to me – I feel good about getting rid of Clarity as it is somehow also owned by Broadcom, similar to Bitnami.

It looks like we replaced a lot of icons, I'm wondering how much it changes the look of the UI? I don't think change is an issue in and of itself but we should make sure the visuals are decent.

[aednichols]

Thank you for the visual fixes!