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

- 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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 2 people

ui/angular.json

@@ -26,11 +26,9 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss",
-              "node_modules/@clr/icons/clr-icons.min.css"
+              "src/styles.scss"
             ],
             "scripts": [
-              "node_modules/@clr/icons/clr-icons.min.js",
               "node_modules/@webcomponents/custom-elements/custom-elements.min.js"
             ],
             "browser": "src/main.ts"

ui/package.json

@@ -14,31 +14,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.2.19",
-    "@angular/cdk": "^19.2.19",
-    "@angular/common": "^19.2.19",
-    "@angular/compiler": "^19.2.19",
-    "@angular/core": "^19.2.19",
-    "@angular/forms": "^19.2.19",
-    "@angular/material": "^19.2.19",
-    "@angular/platform-browser": "^19.2.19",
-    "@angular/platform-browser-dynamic": "^19.2.19",
-    "@angular/router": "^19.2.19",
-    "@cds/core": "^6.17.0",
-    "@clr/angular": "^17.12.2",
-    "@clr/icons": "^13.0.2",
+    "@angular/animations": "^20.0.0",
+    "@angular/cdk": "^20.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/material": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/platform-browser-dynamic": "^20.0.0",
+    "@angular/router": "^20.0.0",
     "@webcomponents/custom-elements": "^1.5.0",
-    "angular-oauth2-oidc": "^14.0.1",
+    "angular-oauth2-oidc": "^20.0.0",
     "core-js": "^3.25.0",
     "rxjs": "^7.5.6",
     "zone.js": "^0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.1",
-    "@angular-eslint/schematics": "^19.8.1",
-    "@angular/cli": "^19.2.1",
-    "@angular/compiler-cli": "^19.2.19",
-    "@angular/language-service": "^19.2.19",
+    "@angular-devkit/build-angular": "^20.0.0",
+    "@angular-eslint/schematics": "^20.0.0",
+    "@angular/cli": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
+    "@angular/language-service": "^20.0.0",
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^9.39.4",
     "@types/angular": "^1.8.4",

ui/src/app/app.component.spec.ts

@@ -5,7 +5,7 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {Injectable} from '@angular/core';
 import {Location} from '@angular/common';
 import {flush, TestBed, fakeAsync, tick, ComponentFixture, waitForAsync} from '@angular/core/testing';
-import {ClrIconModule} from '@clr/angular';
+
 
 import {AppComponent} from './app.component';
 import {CoreModule} from './core/core.module';
@@ -35,7 +35,6 @@ describe('AppComponent', () => {
       ],
       imports: [
         BrowserAnimationsModule,
-        ClrIconModule,
         CoreModule,
         JobListModule,
         JobDetailsModule,
@@ -59,7 +58,7 @@ describe('AppComponent', () => {
   }));
 
   beforeEach(() => {
-    customIconService = TestBed.get(CustomIconService);
+    customIconService = TestBed.inject(CustomIconService);
     fixture = TestBed.createComponent(AppComponent);
     testComponent = fixture.componentInstance;
   });
@@ -70,9 +69,9 @@ describe('AppComponent', () => {
   }));
 
   it('should show an error on initial nav failure', waitForAsync(() => {
-    const location = TestBed.get(Location);
+    const location = TestBed.inject(Location);
     location.replaceState('error');
-    const router: Router = TestBed.get(Router);
+    const router: Router = TestBed.inject(Router);
 
     // Mock the zone to catch unhandled rejections
     spyOn(Zone.current, 'runGuarded').and.callFake((fn: Function) => {

ui/src/app/app.module.ts

@@ -4,7 +4,6 @@ import { FormsModule } from '@angular/forms';
 import { MatIconModule } from "@angular/material/icon";
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ClrIconModule, ClrTooltipModule } from '@clr/angular';
 import { Ng2GoogleChartsModule } from 'ng2-google-charts';
 import { NgxJsonViewerModule } from 'ngx-json-viewer';
 import { AppRoutingModule } from './app-routing.module';
@@ -24,8 +23,6 @@ import { PagenotfoundComponent } from './pagenotfound/pagenotfound.component';
     bootstrap: [AppComponent], imports: [AppRoutingModule,
         BrowserAnimationsModule,
         BrowserModule,
-        ClrIconModule,
-        ClrTooltipModule,
         CoreModule,
         FormsModule,
         JobDetailsModule,

ui/src/app/dashboard/dashboard.component.spec.ts

@@ -26,7 +26,7 @@ import {CapabilitiesResponse} from "../shared/model/CapabilitiesResponse";
 import {CapabilitiesService} from "../core/capabilities.service";
 import {FakeCapabilitiesService} from "../testing/fake-capabilities.service";
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
-import {ClrIconModule, ClrTooltipModule} from "@clr/angular";
+
 import {SettingsService} from "../core/settings.service";
 import {AuthService} from "../core/auth.service";
 
@@ -152,8 +152,6 @@ describe('DashboardComponent', () => {
         TestJobListComponent,
       ],
       imports: [
-        ClrIconModule,
-        ClrTooltipModule,
         CommonModule,
         BrowserAnimationsModule,
         MatCardModule,
@@ -181,7 +179,7 @@ describe('DashboardComponent', () => {
   beforeEach(fakeAsync(() => {
     fixture = TestBed.createComponent(AppComponent);
     de = fixture.debugElement;
-    const router: Router = TestBed.get(Router);
+    const router: Router = TestBed.inject(Router);
     router.initialNavigation();
 
     router.navigate(['dashboard'], {

ui/src/app/dashboard/dashboard.module.ts

@@ -9,10 +9,11 @@ import {MatButtonModule} from "@angular/material/button";
 import {MatCardModule} from "@angular/material/card";
 import {MatSelectModule} from "@angular/material/select";
 import {MatSortModule} from "@angular/material/sort";
+import {MatIconModule} from "@angular/material/icon";
 import {MatTableModule} from "@angular/material/table";
+import {MatTooltipModule} from "@angular/material/tooltip";
 import {GroupedSummaryComponent} from './grouped-summary/grouped-summary.component';
 import {SharedModule} from "../shared/shared.module";
-import {ClrIconModule, ClrTooltipModule} from "@clr/angular";
 
 
 @NgModule({
@@ -22,14 +23,14 @@ import {ClrIconModule, ClrTooltipModule} from "@clr/angular";
     GroupedSummaryComponent
   ],
   imports: [
-    ClrIconModule,
-    ClrTooltipModule,
     CommonModule,
-    MatCardModule,
-    MatTableModule,
-    MatSortModule,
     MatButtonModule,
+    MatCardModule,
+    MatIconModule,
     MatSelectModule,
+    MatSortModule,
+    MatTableModule,
+    MatTooltipModule,
     RouterModule,
     SharedModule,
   ],

ui/src/app/dashboard/grouped-summary/grouped-summary.component.html

@@ -8,12 +8,7 @@
           </span></th>
           <ng-container *ngFor="let status of statusArray">
             <th [mat-sort-header]=status>
-              <clr-tooltip>
-                <clr-icon clrTooltipTrigger [attr.shape]="getStatusIcon(status)" class="status-icon"></clr-icon>
-                <clr-tooltip-content clrPosition="left" clrSize="xs" *clrIfOpen>
-                  <span>{{ status }}</span>
-                </clr-tooltip-content>
-              </clr-tooltip>
+              <mat-icon class="status-icon" [ngClass]="getStatusIcon(status)" [matTooltip]="status" matTooltipPosition="left">{{getStatusIcon(status)}}</mat-icon>
             </th>
           </ng-container>
         </tr>
@@ -39,7 +34,7 @@
     </mat-card-content>
     <div class="button-container" *ngIf="displayCollapseArrow()">
       <button mat-icon-button (click)="onArrowClick()">
-          <clr-icon [attr.shape]="'angle'" class="arrow"></clr-icon>
+          <mat-icon class="arrow">expand_more</mat-icon>
       </button>
     </div>
   </mat-card>

ui/src/app/dashboard/grouped-summary/grouped-summary.component.spec.ts

@@ -13,7 +13,7 @@ import {JobStatus} from "../../shared/model/JobStatus";
 import {Aggregation} from "../../shared/model/Aggregation";
 import {ActivatedRoute} from "@angular/router";
 import {RouterTestingModule} from "@angular/router/testing";
-import {ClrIconModule, ClrTooltipModule} from "@clr/angular";
+
 import {SharedModule} from "../../shared/shared.module";
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 
@@ -126,8 +126,6 @@ describe('GroupedSummaryComponent', () => {
         TestHostComponent
       ],
       imports: [
-        ClrIconModule,
-        ClrTooltipModule,
         CommonModule,
         BrowserAnimationsModule,
         MatCardModule,

ui/src/app/dashboard/total-summary/total-summary.component.html

@@ -7,9 +7,7 @@
       <div class="content">
           <!-- Add commas to numbers for better UX -->
           {{ statusCountsMap.get(status).toLocaleString('en') }}
-        <clr-tooltip>
-          <clr-icon clrTooltipTrigger [attr.shape]="getStatusIcon(status)" class="icon"></clr-icon>
-        </clr-tooltip>
+        <mat-icon class="icon" [ngClass]="getStatusIcon(status)">{{getStatusIcon(status)}}</mat-icon>
       </div>
     </a>
   </mat-card>

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

@@ -10,7 +10,7 @@ import {JobStatus} from "../../shared/model/JobStatus";
 import {StatusCounts} from "../../shared/model/StatusCounts";
 import {ActivatedRoute} from "@angular/router";
 import {RouterTestingModule} from "@angular/router/testing";
-import {ClrIconModule, ClrTooltipModule} from "@clr/angular";
+
 
 const testSummary: StatusCounts = {
   counts: [
@@ -39,8 +39,6 @@ describe('TotalSummaryComponent', () => {
         TestHostComponent
       ],
       imports: [
-        ClrIconModule,
-        ClrTooltipModule,
         CommonModule,
         MatCardModule,
         MatTableModule,