chore(deps): upgrade frontend to Angular 20

frontend/.eslintrc.json

@@ -49,6 +49,7 @@
           }
         ],
         "@angular-eslint/prefer-standalone": "off",
+        "@angular-eslint/prefer-inject": "off",
         "@typescript-eslint/consistent-type-definitions": "off",
         "@typescript-eslint/dot-notation": "off",
         "@typescript-eslint/explicit-member-accessibility": [

frontend/angular.json

@@ -106,17 +106,37 @@
             },
             "tsConfig": "src/tsconfig.spec.json"
           }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
-          }
         }
       }
     }
   },
   "cli": {
     "analytics": false
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

frontend/package.json

@@ -13,7 +13,7 @@
     "test": "ng test --watch=false",
     "test:ci": "node --max-old-space-size=8192 ./node_modules/nx/bin/nx test --watch=false --progress=false",
     "prettier:fix": "prettier --write ./src",
-    "lint": "ng lint",
+    "lint": "eslint ./src",
     "eslint:fix": "yarn eslint --fix ./src",
     "format:fix": "yarn prettier-eslint --write \"src/**/*.{ts,js,html,scss,less,json}\"",
     "format:ci": "yarn prettier-eslint --list-different \"src/**/*.{ts,js,html,scss,less,json}\" && yarn eslint ./src",
@@ -24,16 +24,16 @@
     "@abacritt/angularx-social-login": "2.3.0",
     "@ai-sdk/openai": "2.0.67",
     "@ali-hm/angular-tree-component": "12.0.5",
-    "@angular/animations": "19.2.21",
-    "@angular/cdk": "19.2.19",
-    "@angular/common": "19.2.21",
-    "@angular/compiler": "19.2.21",
-    "@angular/core": "19.2.21",
-    "@angular/forms": "19.2.21",
-    "@angular/localize": "19.2.21",
-    "@angular/platform-browser": "19.2.21",
-    "@angular/platform-browser-dynamic": "19.2.21",
-    "@angular/router": "19.2.21",
+    "@angular/animations": "20.3.19",
+    "@angular/cdk": "20.2.14",
+    "@angular/common": "20.3.19",
+    "@angular/compiler": "20.3.19",
+    "@angular/core": "20.3.19",
+    "@angular/forms": "20.3.19",
+    "@angular/localize": "20.3.19",
+    "@angular/platform-browser": "20.3.19",
+    "@angular/platform-browser-dynamic": "20.3.19",
+    "@angular/router": "20.3.19",
     "@auth0/angular-jwt": "5.1.0",
     "@codingame/monaco-vscode-java-default-extension": "8.0.4",
     "@codingame/monaco-vscode-python-default-extension": "8.0.4",
@@ -60,11 +60,11 @@
     "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@8.0.4",
     "monaco-editor-wrapper": "5.5.3",
     "monaco-languageclient": "8.8.3",
-    "ng-zorro-antd": "19.3.1",
+    "ng-zorro-antd": "20.4.4",
     "ngx-color-picker": "12.0.1",
     "ngx-file-drop": "16.0.0",
     "ngx-json-viewer": "3.2.1",
-    "ngx-markdown": "19.1.1",
+    "ngx-markdown": "20.1.0",
     "papaparse": "5.4.1",
     "path-browserify": "1.0.1",
     "plotly.js-basic-dist-min": "2.29.0",
@@ -81,7 +81,7 @@
     "y-monaco": "0.1.5",
     "y-protocols": "1.0.5",
     "y-quill": "0.1.5",
-    "y-websocket": "1.4.0",
+    "y-websocket": "1.5.4",
     "yjs": "13.5.41",
     "zod": "3.25.76",
     "zone.js": "0.15.1"
@@ -93,17 +93,17 @@
     "jschardet": "portal:./tools/jschardet-stub"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "19.0.1",
-    "@angular-devkit/build-angular": "19.2.24",
-    "@angular-devkit/core": "19.2.24",
-    "@angular-devkit/schematics": "19.2.24",
-    "@angular-eslint/eslint-plugin": "19.8.1",
-    "@angular-eslint/eslint-plugin-template": "19.8.1",
-    "@angular-eslint/template-parser": "19.8.1",
-    "@angular/cli": "19.2.24",
-    "@angular/compiler-cli": "19.2.21",
+    "@angular-builders/custom-webpack": "20.0.1-beta.1",
+    "@angular-devkit/build-angular": "20.3.24",
+    "@angular-devkit/core": "20.3.24",
+    "@angular-devkit/schematics": "20.3.24",
+    "@angular-eslint/eslint-plugin": "20.7.0",
+    "@angular-eslint/eslint-plugin-template": "20.7.0",
+    "@angular-eslint/template-parser": "20.7.0",
+    "@angular/cli": "20.3.24",
+    "@angular/compiler-cli": "20.3.19",
     "@nx/angular": "21.6.11",
-    "@schematics/angular": "19.2.24",
+    "@schematics/angular": "20.3.24",
     "@types/backbone": "1.4.15",
     "@types/concaveman": "1.1.6",
     "@types/content-disposition": "0",
@@ -115,7 +115,7 @@
     "@types/json-schema": "7.0.9",
     "@types/lodash": "4.14.179",
     "@types/lodash-es": "4.17.4",
-    "@types/node": "18.15.5",
+    "@types/node": "20.19.39",
     "@types/papaparse": "5.3.5",
     "@types/plotly.js-basic-dist-min": "2.12.4",
     "@types/quill": "2.0.9",
@@ -148,7 +148,7 @@
     "sass": "1.71.1",
     "style-loader": "3.3.4",
     "ts-proto": "2.2.0",
-    "typescript": "5.5.4",
+    "typescript": "5.9.3",
     "webpack": "5.89.0",
     "webpack-bundle-analyzer": "4.5.0"
   },

frontend/src/app/app.module.ts

@@ -116,6 +116,7 @@ import { LocalLoginComponent } from "./hub/component/about/local-login/local-log
 import { MarkdownModule } from "ngx-markdown";
 import { FileSaverService } from "./dashboard/service/user/file/file-saver.service";
 import { DragDropModule } from "@angular/cdk/drag-drop";
+import { ScrollingModule } from "@angular/cdk/scrolling";
 import { UserWorkflowListItemComponent } from "./dashboard/component/user/user-workflow/user-workflow-list-item/user-workflow-list-item.component";
 import { UserProjectListItemComponent } from "./dashboard/component/user/user-project/user-project-list-item/user-project-list-item.component";
 import { SortButtonComponent } from "./dashboard/component/user/sort-button/sort-button.component";
@@ -134,7 +135,6 @@ import { ErrorFrameComponent } from "./workspace/component/result-panel/error-fr
 import { NzResizableModule } from "ng-zorro-antd/resizable";
 import { WorkflowRuntimeStatisticsComponent } from "./dashboard/component/user/user-workflow/ngbd-modal-workflow-executions/workflow-runtime-statistics/workflow-runtime-statistics.component";
 import { TimeTravelComponent } from "./workspace/component/left-panel/time-travel/time-travel.component";
-import { NzMessageModule } from "ng-zorro-antd/message";
 import { NzModalModule } from "ng-zorro-antd/modal";
 import { NzDescriptionsModule } from "ng-zorro-antd/descriptions";
 import { OverlayModule } from "@angular/cdk/overlay";
@@ -182,6 +182,7 @@ import { NzSliderModule } from "ng-zorro-antd/slider";
 import { AdminSettingsComponent } from "./dashboard/component/admin/settings/admin-settings.component";
 import { FormlyRepeatDndComponent } from "./common/formly/repeat-dnd/repeat-dnd.component";
 import { NzInputNumberModule } from "ng-zorro-antd/input-number";
+import { NzGridModule } from "ng-zorro-antd/grid";
 import { NzCheckboxModule } from "ng-zorro-antd/checkbox";
 import { NzRadioModule } from "ng-zorro-antd/radio";
 import { RegistrationRequestModalComponent } from "./common/service/user/registration-request-modal/registration-request-modal.component";
@@ -235,8 +236,6 @@ registerLocaleData(en);
     ErrorFrameComponent,
     ResultTableFrameComponent,
     OperatorPropertyEditFrameComponent,
-    ResultTableFrameComponent,
-    OperatorPropertyEditFrameComponent,
     UserProjectComponent,
     UserProjectSectionComponent,
     NgbdModalAddProjectWorkflowComponent,
@@ -252,7 +251,6 @@ registerLocaleData(en);
     UserDatasetStagedObjectsListComponent,
     NzModalCommentBoxComponent,
     LeftPanelComponent,
-    LocalLoginComponent,
     ContextMenuComponent,
     CoeditorUserIconComponent,
     AgentPanelComponent,
@@ -269,13 +267,13 @@ registerLocaleData(en);
     FiltersComponent,
     FiltersInstructionsComponent,
     SearchComponent,
-    SearchResultsComponent,
     PortPropertyEditFrameComponent,
     WorkflowRuntimeStatisticsComponent,
     FlarumComponent,
     HighlightSearchTermsPipe,
     SearchBarComponent,
     ListItemComponent,
+    SearchResultsComponent,
     HubComponent,
     HubWorkflowDetailComponent,
     LandingPageComponent,
@@ -326,7 +324,6 @@ registerLocaleData(en);
     NzBadgeModule,
     NzUploadModule,
     NgxJsonViewerModule,
-    NzMessageModule,
     NzModalModule,
     NzDescriptionsModule,
     NzCardModule,
@@ -358,6 +355,8 @@ registerLocaleData(en);
     NzInputNumberModule,
     NzCheckboxModule,
     NzRadioModule,
+    NzGridModule,
+    ScrollingModule,
   ],
   providers: [
     provideNzI18n(en_US),

frontend/src/app/common/service/notification/notification.service.ts

@@ -19,7 +19,7 @@
 
 import { Injectable } from "@angular/core";
 import { NzMessageDataOptions, NzMessageService } from "ng-zorro-antd/message";
-import { NzNotificationService } from "ng-zorro-antd/notification";
+import { NzNotificationDataOptions, NzNotificationService } from "ng-zorro-antd/notification";
 
 /**
  * NotificationService is an entry service for sending notifications
@@ -34,7 +34,7 @@ export class NotificationService {
   ) {}
 
   // Only blank can be removed manually
-  blank(title: string, content: string, options: NzMessageDataOptions = {}): void {
+  blank(title: string, content: string, options: NzNotificationDataOptions = {}): void {
     this.notification.blank(title, content, options);
   }
 

frontend/src/app/common/service/workflow-persist/workflow-persist.service.spec.ts

@@ -51,7 +51,7 @@ describe("WorkflowPersistService", () => {
       imports: [HttpClientTestingModule],
     });
     service = TestBed.inject(WorkflowPersistService);
-    httpTestingController = TestBed.get(HttpTestingController);
+    httpTestingController = TestBed.inject(HttpTestingController);
   });
 
   it("should be created", () => {

frontend/src/app/dashboard/component/admin/settings/admin-settings.component.spec.ts

@@ -20,7 +20,6 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { AdminSettingsComponent } from "./admin-settings.component";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
-import { NzMessageModule } from "ng-zorro-antd/message";
 import { NzCardModule } from "ng-zorro-antd/card";
 
 describe("AdminSettingsComponent", () => {
@@ -30,7 +29,7 @@ describe("AdminSettingsComponent", () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [AdminSettingsComponent],
-      imports: [HttpClientTestingModule, NzMessageModule, NzCardModule],
+      imports: [HttpClientTestingModule, NzCardModule],
     }).compileComponents();
   });
 

frontend/src/app/dashboard/component/user/filters/filters.component.ts

@@ -22,7 +22,6 @@ import { OperatorMetadataService } from "src/app/workspace/service/operator-meta
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { Observable, of } from "rxjs";
 import { DashboardProject } from "../../../type/dashboard-project.interface";
-import { remove } from "lodash-es";
 import { NotificationService } from "src/app/common/service/notification/notification.service";
 import { UserProjectService } from "../../../service/user/project/user-project.service";
 import { WorkflowPersistService } from "src/app/common/service/workflow-persist/workflow-persist.service";
@@ -247,7 +246,7 @@ export class FiltersComponent implements OnInit {
           case "owner":
             const selectedOwnerIndex = this.owners.findIndex(owner => owner.userName === searchValue);
             if (selectedOwnerIndex === -1) {
-              remove(this.masterFilterList, filterTag => filterTag === tag);
+              this.removeInvalidFilterTag(tag);
               this.notificationService.error("Invalid owner name");
               break;
             }
@@ -257,7 +256,7 @@ export class FiltersComponent implements OnInit {
           case "id":
             const selectedIDIndex = this.wids.findIndex(wid => wid.id === searchValue);
             if (selectedIDIndex === -1) {
-              remove(this.masterFilterList, filterTag => filterTag === tag);
+              this.removeInvalidFilterTag(tag);
               this.notificationService.error("Invalid workflow id");
               break;
             }
@@ -267,7 +266,7 @@ export class FiltersComponent implements OnInit {
           case "operator":
             const selectedOperator = this.selectedOperators.find(operator => operator.userFriendlyName === searchValue);
             if (!selectedOperator) {
-              remove(this.masterFilterList, filterTag => filterTag === tag);
+              this.removeInvalidFilterTag(tag);
               this.notificationService.error("Invalid operator name");
               break;
             }
@@ -285,7 +284,7 @@ export class FiltersComponent implements OnInit {
           case "project":
             const selectedProjectIndex = this.userProjectsDropdown.findIndex(proj => proj.name === searchValue);
             if (selectedProjectIndex === -1) {
-              remove(this.masterFilterList, filterTag => filterTag === tag);
+              this.removeInvalidFilterTag(tag);
               this.notificationService.error("Invalid project name");
               break;
             }
@@ -342,6 +341,13 @@ export class FiltersComponent implements OnInit {
     this.buildMasterFilterList();
   }
 
+  private removeInvalidFilterTag(tag: string): void {
+    this.setMasterFilterList(
+      this.masterFilterList.filter(filterTag => filterTag !== tag),
+      false
+    );
+  }
+
   /**
    * sets all dropdown menu options to unchecked
    */

frontend/src/app/dashboard/component/user/list-item/list-item.component.ts

@@ -19,7 +19,6 @@
 
 import {
   ChangeDetectorRef,
-  Component,
   ElementRef,
   EventEmitter,
   Input,
@@ -28,6 +27,7 @@ import {
   SimpleChanges,
   ViewChild,
 } from "@angular/core";
+import { Component } from "@angular/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { NzModalRef, NzModalService } from "ng-zorro-antd/modal";
 import { DashboardEntry } from "src/app/dashboard/type/dashboard-entry";

frontend/src/app/dashboard/component/user/user-dataset/user-dataset-list-item/user-dataset-list-item.component.html

@@ -98,7 +98,7 @@
       <div class="dataset-item-meta-description">
         <label
           *ngIf="!editingDescription; else customDatasetDescription "
-          (click)="editingDescription = editable && entry.accessPrivilege == 'WRITE'"
+          (click)="editingDescription = editable && entry.accessPrivilege === 'WRITE'"
           class="dataset-description-label">
           {{ dataset.description }}
         </label>

frontend/src/app/dashboard/component/user/user-quota/user-quota.component.ts

@@ -179,15 +179,18 @@ export class UserQuotaComponent implements OnInit {
         text: title,
       },
       xaxis: {
-        title: x_label,
+        title: {
+          text: x_label,
+        },
       },
       yaxis: {
-        title: y_label,
+        title: {
+          text: y_label,
+        },
         rangemode: "tozero" as const,
         zeroline: true,
         zerolinewidth: 2,
         zerolinecolor: "#000",
-        range: [0, "auto"],
         tickmode: yRange <= 5 ? ("linear" as const) : undefined,
         dtick: yRange <= 5 ? 1 : undefined,
       },