chore(deps): upgrade frontend to Angular 19

.github/workflows/github-action-build.yml

@@ -34,6 +34,7 @@ concurrency:
 
 jobs:
   frontend:
+    name: frontend (${{ matrix.os }}, 18)
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -46,7 +47,7 @@ jobs:
           - os: windows-latest
             arch: x64
         node-version:
-          - 18
+          - 20.19.0
     steps:
       - name: Checkout Texera
         uses: actions/checkout@v5
@@ -57,13 +58,10 @@ jobs:
           architecture: ${{ matrix.arch }}
       - uses: actions/cache@v4
         with:
-          path: |
-            frontend/.yarn/cache
-            frontend/.yarn/unplugged
-            frontend/.yarn/install-state.gz
-          key: ${{ runner.os }}-${{ matrix.arch }}-${{ matrix.node-version }}-yarn-cache-v2-${{ hashFiles('**/yarn.lock') }}
+          path: frontend/.yarn/cache
+          key: ${{ runner.os }}-${{ matrix.arch }}-${{ matrix.node-version }}-yarn-cache-v4-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-${{ matrix.arch }}-${{ matrix.node-version }}-yarn-cache-v2-
+            ${{ runner.os }}-${{ matrix.arch }}-${{ matrix.node-version }}-yarn-cache-v4-
       - name: Prepare Yarn 4.14.1
         run: corepack enable && corepack prepare yarn@4.14.1 --activate
       - name: Setup Python
@@ -119,14 +117,16 @@ jobs:
         run: python --version || python3 --version
       - name: Install dependencies
         run: |
-          python -m pip install uv
-          if [ -f amber/requirements.txt ]; then uv pip install --system -r amber/requirements.txt; fi
-          if [ -f amber/operator-requirements.txt ]; then uv pip install --system -r amber/operator-requirements.txt; fi
+          python -m pip install --upgrade pip
+          if [ -f amber/requirements.txt ]; then pip install -r amber/requirements.txt; fi
+          if [ -f amber/operator-requirements.txt ]; then pip install -r amber/operator-requirements.txt; fi
       - name: Setup sbt launcher
         uses: sbt/setup-sbt@508b753e53cb6095967669e0911487d2b9bc9f41 # v1.1.22
       - uses: coursier/cache-action@4e2615869d13561d626ed48655e1a39e5b192b3c # v6.4.9
         with:
           extraSbtFiles: '["*.sbt", "project/**.{scala,sbt}", "project/build.properties" ]'
+      - name: Lint with scalafmt
+        run: sbt scalafmtCheckAll
       - name: Create Databases
         run: |
           psql -h localhost -U postgres -f sql/texera_ddl.sql
@@ -138,12 +138,14 @@ jobs:
         run: psql -h localhost -U postgres -v DB_NAME=texera_db_for_test_cases -f sql/texera_ddl.sql
         env:
           PGPASSWORD: postgres
+      - name: Compile with sbt
+        run: sbt clean package
+      - name: Lint with scalafix
+        run: sbt "scalafixAll --check"
       - name: Set docker-java API version
         run: |
           echo "api.version=1.52" >> ~/.docker-java.properties
           cat ~/.docker-java.properties
-      - name: Lint with scalafmt and scalafix
-        run: sbt 'scalafmtCheckAll; scalafixAll --check'
       - name: Run backend tests
         run: sbt test
 
@@ -162,9 +164,9 @@ jobs:
           python-version: ${{ matrix.python-version }}
       - name: Install dependencies
         run: |
-          python -m pip install uv
-          if [ -f amber/requirements.txt ]; then uv pip install --system -r amber/requirements.txt; fi
-          if [ -f amber/operator-requirements.txt ]; then uv pip install --system -r amber/operator-requirements.txt; fi
+          python -m pip install --upgrade pip
+          if [ -f amber/requirements.txt ]; then pip install -r amber/requirements.txt; fi
+          if [ -f amber/operator-requirements.txt ]; then pip install -r amber/operator-requirements.txt; fi
       - name: Install PostgreSQL
         run: sudo apt-get update && sudo apt-get install -y postgresql
       - name: Start PostgreSQL Service

frontend/.eslintrc.json

@@ -48,6 +48,7 @@
             "style": "camelCase"
           }
         ],
+        "@angular-eslint/prefer-standalone": "off",
         "@typescript-eslint/consistent-type-definitions": "off",
         "@typescript-eslint/dot-notation": "off",
         "@typescript-eslint/explicit-member-accessibility": [
@@ -65,7 +66,7 @@
         "no-shadow": "off",
         "no-underscore-dangle": "off",
         "no-unused-expressions": "error",
-        "quotes": "error",
+        "quotes": ["error", "double", { "avoidEscape": true }],
         "rxjs-angular/prefer-takeuntil": [
           "error",
           {

frontend/angular.json

@@ -73,12 +73,12 @@
         "serve": {
           "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
-            "browserTarget": "gui:build",
+            "buildTarget": "gui:build",
             "proxyConfig": "proxy.config.json"
           },
           "configurations": {
             "production": {
-              "browserTarget": "gui:build:production"
+              "buildTarget": "gui:build:production"
             }
           }
         },

frontend/karma.conf.js

@@ -38,8 +38,8 @@ module.exports = function (config) {
         base: "ChromeHeadless",
         flags: [
           "--no-sandbox",
-          "--headless=new",
-          "--remote-debugging-port=9222", // Enable remote debugging for better error output
+          "--headless",
+          "--remote-debugging-port=0",
           "--disable-gpu",
           "--disable-translate",
           "--disable-extensions",

frontend/package.json

@@ -2,12 +2,12 @@
   "name": "gui",
   "version": "0.0.0",
   "engines": {
-    "node": ">=18.16.0"
+    "node": ">=20.19.0"
   },
   "license": "Apache-2.0",
   "scripts": {
     "start": "concurrently --kill-others \"npx y-websocket\" \"ng serve\"",
-    "build": "ng build --configuration=production --progress=false --source-map=false",
+    "build": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng build --configuration=production --progress=false --source-map=false",
     "build:ci": "node --max-old-space-size=8192 ./node_modules/nx/bin/nx build --configuration=production --progress=false --source-map=false",
     "analyze": "ng build --configuration=production --stats-json && webpack-bundle-analyzer dist/stats.json",
     "test": "ng test --watch=false",
@@ -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": "18.2.14",
-    "@angular/cdk": "18.2.14",
-    "@angular/common": "18.2.14",
-    "@angular/compiler": "18.2.14",
-    "@angular/core": "18.2.14",
-    "@angular/forms": "18.2.14",
-    "@angular/localize": "18.2.14",
-    "@angular/platform-browser": "18.2.14",
-    "@angular/platform-browser-dynamic": "18.2.14",
-    "@angular/router": "18.2.14",
+    "@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",
     "@auth0/angular-jwt": "5.1.0",
     "@codingame/monaco-vscode-java-default-extension": "8.0.4",
     "@codingame/monaco-vscode-python-default-extension": "8.0.4",
@@ -55,16 +55,16 @@
     "js-abbreviation-number": "1.4.0",
     "jszip": "3.10.1",
     "lodash-es": "4.17.21",
-    "marked": "12.0.2",
+    "marked": "15.0.12",
     "monaco-breakpoints": "0.2.0",
     "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": "18.2.1",
+    "ng-zorro-antd": "19.3.1",
     "ngx-color-picker": "12.0.1",
     "ngx-file-drop": "16.0.0",
     "ngx-json-viewer": "3.2.1",
-    "ngx-markdown": "18.1.0",
+    "ngx-markdown": "19.1.1",
     "papaparse": "5.4.1",
     "path-browserify": "1.0.1",
     "plotly.js-basic-dist-min": "2.29.0",
@@ -84,7 +84,7 @@
     "y-websocket": "1.4.0",
     "yjs": "13.5.41",
     "zod": "3.25.76",
-    "zone.js": "0.14.10"
+    "zone.js": "0.15.1"
   },
   "resolutions": {
     "vscode": "npm:@codingame/monaco-vscode-api@8.0.4",
@@ -93,17 +93,17 @@
     "jschardet": "portal:./tools/jschardet-stub"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "18.0.0",
-    "@angular-devkit/build-angular": "18.2.21",
-    "@angular-devkit/core": "18.2.21",
-    "@angular-devkit/schematics": "18.2.21",
-    "@angular-eslint/eslint-plugin": "18.4.3",
-    "@angular-eslint/eslint-plugin-template": "18.4.3",
-    "@angular-eslint/template-parser": "18.4.3",
-    "@angular/cli": "18.2.21",
-    "@angular/compiler-cli": "18.2.14",
-    "@nx/angular": "20.0.3",
-    "@schematics/angular": "18.2.21",
+    "@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",
+    "@nx/angular": "21.6.11",
+    "@schematics/angular": "19.2.24",
     "@types/backbone": "1.4.15",
     "@types/concaveman": "1.1.6",
     "@types/content-disposition": "0",
@@ -121,10 +121,10 @@
     "@types/quill": "2.0.9",
     "@types/uuid": "8.3.4",
     "@types/validator": "13.12.0",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
-    "@typescript-eslint/types": "7.18.0",
-    "@typescript-eslint/utils": "7.18.0",
+    "@typescript-eslint/eslint-plugin": "8.59.0",
+    "@typescript-eslint/parser": "8.59.0",
+    "@typescript-eslint/types": "8.59.0",
+    "@typescript-eslint/utils": "8.59.0",
     "concurrently": "7.4.0",
     "eslint": "8.57.0",
     "eslint-plugin-import": "2.29.1",
@@ -141,7 +141,7 @@
     "karma-chrome-launcher": "3.2.0",
     "karma-jasmine": "5.1.0",
     "nodecat": "2.0.0",
-    "nx": "20.0.3",
+    "nx": "21.6.11",
     "prettier": "3.2.5",
     "prettier-eslint-cli": "8.0.1",
     "rxjs-marbles": "7.0.1",

frontend/src/app/app.component.ts

@@ -35,6 +35,7 @@ import { UntilDestroy } from "@ngneat/until-destroy";
     </div>
     <router-outlet *ngIf="configLoaded"></router-outlet>
   `,
+  standalone: false,
 })
 export class AppComponent {
   configLoaded = false;

frontend/src/app/common/formly/array.type.ts

@@ -47,5 +47,6 @@ import { FieldArrayType } from "@ngx-formly/core";
         nzType="plus"></span>
     </button>
   `,
+  standalone: false,
 })
 export class ArrayTypeComponent extends FieldArrayType {}

frontend/src/app/common/formly/collab-wrapper/collab-wrapper/collab-wrapper.component.ts

@@ -66,6 +66,7 @@ Quill.register("modules/cursors", QuillCursors);
 @Component({
   templateUrl: "./collab-wrapper.component.html",
   styleUrls: ["./collab-wrapper.component.css"],
+  standalone: false,
 })
 export class CollabWrapperComponent extends FieldWrapper<FieldTypeConfig> implements AfterContentInit {
   private quill?: Quill;

frontend/src/app/common/formly/multischema.type.ts

@@ -29,5 +29,6 @@ import { FieldType } from "@ngx-formly/core";
       </div>
     </div>
   `,
+  standalone: false,
 })
 export class MultiSchemaTypeComponent extends FieldType {}

frontend/src/app/common/formly/null.type.ts

@@ -13,5 +13,6 @@ import { FieldType, FieldTypeConfig } from "@ngx-formly/core";
 @Component({
   // selector: 'formly-null-type',
   template: "",
+  standalone: false,
 })
 export class NullTypeComponent extends FieldType<FieldTypeConfig> {}

frontend/src/app/common/formly/object.type.ts

@@ -27,6 +27,7 @@ import { FieldType, FieldTypeConfig } from "@ngx-formly/core";
         [field]="f"></formly-field>
     </div>
   `,
+  standalone: false,
 })
 export class ObjectTypeComponent extends FieldType<FieldTypeConfig> {
   defaultOptions = {

frontend/src/app/common/formly/preset-wrapper/preset-wrapper.component.ts

@@ -52,6 +52,7 @@ export interface PresetKey {
 @Component({
   templateUrl: "./preset-wrapper.component.html",
   styleUrls: ["./preset-wrapper.component.scss"],
+  standalone: false,
 })
 export class PresetWrapperComponent extends FieldWrapper implements OnInit, OnDestroy {
   public searchResults: Preset[] = []; // the list of presets shown in the dropdown

frontend/src/app/common/formly/repeat-dnd/repeat-dnd.component.ts

@@ -25,6 +25,7 @@ import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
   selector: "texera-formly-repeat-section-dnd",
   templateUrl: "./repeat-dnd.component.html",
   styleUrls: ["./repeat-dnd.component.css"],
+  standalone: false,
 })
 export class FormlyRepeatDndComponent extends FieldArrayType {
   onDrop(event: CdkDragDrop<string[]>) {

frontend/src/app/common/service/user/registration-request-modal/registration-request-modal.component.ts

@@ -24,6 +24,7 @@ import { NZ_MODAL_DATA } from "ng-zorro-antd/modal";
   selector: "texera-registration-request-modal",
   templateUrl: "./registration-request-modal.component.html",
   styleUrls: ["./registration-request-modal.component.scss"],
+  standalone: false,
 })
 
 // Component for registration form modal

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

@@ -28,24 +28,24 @@ describe("WorkflowPersistService", () => {
   let service: WorkflowPersistService;
   let httpTestingController: HttpTestingController;
   const testContent =
-    "{\"operators\":[{\"operatorID\":\"Limit-operator-a11370eb-940a-4f10-8b36-8b413b2396c9\"," +
-    "\"operatorType\":\"Limit\",\"operatorProperties\":{\"limit\":2},\"inputPorts\":[{\"portID\":\"input-0\",\"displayName\":\"\"}]," +
-    "\"outputPorts\":[{\"portID\":\"output-0\",\"displayName\":null}],\"showAdvanced\":false}," +
-    "{\"operatorID\":\"SimpleSink-operator-e4a77a32-e3c9-4c40-a26d-a1aa103cc914\",\"operatorType\":\"SimpleSink\"," +
-    "\"operatorProperties\":{},\"inputPorts\":[{\"portID\":\"input-0\",\"displayName\":\"\"}],\"outputPorts\":[]," +
-    "\"showAdvanced\":false},{\"operatorID\":\"MySQLSource-operator-1ee619b1-8884-4564-a136-29ef77dfcc50\"," +
-    "\"operatorType\":\"MySQLSource\",\"operatorProperties\":{\"port\":\"default\",\"search\":false,\"progressive\":false," +
-    "\"min\":\"auto\",\"max\":\"auto\",\"interval\":1000000000,\"host\":\"localhost\"},\"inputPorts\":[]," +
-    "\"outputPorts\":[{\"portID\":\"output-0\",\"displayName\":\"\"}],\"showAdvanced\":false}]," +
-    "\"operatorPositions\":{\"Limit-operator-a11370eb-940a-4f10-8b36-8b413b2396c9\":{\"x\":200,\"y\":212}," +
-    "\"SimpleSink-operator-e4a77a32-e3c9-4c40-a26d-a1aa103cc914\":{\"x\":392,\"y\":218}," +
-    "\"MySQLSource-operator-1ee619b1-8884-4564-a136-29ef77dfcc50\":{\"x\":36,\"y\":214}}," +
-    "\"links\":[{\"linkID\":\"link-ea977a06-3ef5-4c80-b31a-4013cfb8321d\"," +
-    "\"source\":{\"operatorID\":\"Limit-operator-a11370eb-940a-4f10-8b36-8b413b2396c9\",\"portID\":\"output-0\"}," +
-    "\"target\":{\"operatorID\":\"SimpleSink-operator-e4a77a32-e3c9-4c40-a26d-a1aa103cc914\",\"portID\":\"input-0\"}}," +
-    "{\"linkID\":\"link-c94e24a6-2c77-40cf-ba22-1a7ffba64b7d\",\"source\":{\"operatorID\":" +
-    "\"MySQLSource-operator-1ee619b1-8884-4564-a136-29ef77dfcc50\",\"portID\":\"output-0\"},\"target\":" +
-    "{\"operatorID\":\"Limit-operator-a11370eb-940a-4f10-8b36-8b413b2396c9\",\"portID\":\"input-0\"}}],\"breakpoints\":{}}";
+    '{"operators":[{"operatorID":"Limit-operator-a11370eb-940a-4f10-8b36-8b413b2396c9",' +
+    '"operatorType":"Limit","operatorProperties":{"limit":2},"inputPorts":[{"portID":"input-0","displayName":""}],' +
+    '"outputPorts":[{"portID":"output-0","displayName":null}],"showAdvanced":false},' +
+    '{"operatorID":"SimpleSink-operator-e4a77a32-e3c9-4c40-a26d-a1aa103cc914","operatorType":"SimpleSink",' +
+    '"operatorProperties":{},"inputPorts":[{"portID":"input-0","displayName":""}],"outputPorts":[],' +
+    '"showAdvanced":false},{"operatorID":"MySQLSource-operator-1ee619b1-8884-4564-a136-29ef77dfcc50",' +
+    '"operatorType":"MySQLSource","operatorProperties":{"port":"default","search":false,"progressive":false,' +
+    '"min":"auto","max":"auto","interval":1000000000,"host":"localhost"},"inputPorts":[],' +
+    '"outputPorts":[{"portID":"output-0","displayName":""}],"showAdvanced":false}],' +
+    '"operatorPositions":{"Limit-operator-a11370eb-940a-4f10-8b36-8b413b2396c9":{"x":200,"y":212},' +
+    '"SimpleSink-operator-e4a77a32-e3c9-4c40-a26d-a1aa103cc914":{"x":392,"y":218},' +
+    '"MySQLSource-operator-1ee619b1-8884-4564-a136-29ef77dfcc50":{"x":36,"y":214}},' +
+    '"links":[{"linkID":"link-ea977a06-3ef5-4c80-b31a-4013cfb8321d",' +
+    '"source":{"operatorID":"Limit-operator-a11370eb-940a-4f10-8b36-8b413b2396c9","portID":"output-0"},' +
+    '"target":{"operatorID":"SimpleSink-operator-e4a77a32-e3c9-4c40-a26d-a1aa103cc914","portID":"input-0"}},' +
+    '{"linkID":"link-c94e24a6-2c77-40cf-ba22-1a7ffba64b7d","source":{"operatorID":' +
+    '"MySQLSource-operator-1ee619b1-8884-4564-a136-29ef77dfcc50","portID":"output-0"},"target":' +
+    '{"operatorID":"Limit-operator-a11370eb-940a-4f10-8b36-8b413b2396c9","portID":"input-0"}}],"breakpoints":{}}';
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],

frontend/src/app/common/util/computing-unit.util.ts

@@ -68,6 +68,7 @@ import { DashboardWorkflowComputingUnit } from "../type/workflow-computing-unit"
       </tbody>
     </table>
   `,
+  standalone: false,
 })
 export class ComputingUnitMetadataComponent {
   readonly unit: DashboardWorkflowComputingUnit = inject(NZ_MODAL_DATA);

frontend/src/app/common/util/size-formatter.util.spec.ts

@@ -25,7 +25,7 @@ describe("formatSize", () => {
     expect(result).toBe("1.50 KB");
   });
 
-  it("should return \"0 Bytes\" for undefined or non-positive input", () => {
+  it('should return "0 Bytes" for undefined or non-positive input', () => {
     expect(formatSize(undefined)).toBe("0 B");
     expect(formatSize(-100)).toBe("0 B");
     expect(formatSize(0)).toBe("0 B");

frontend/src/app/dashboard/component/admin/execution/admin-execution.component.ts

@@ -33,6 +33,7 @@ export const NO_SORT = "NO_SORTING";
 @Component({
   templateUrl: "./admin-execution.component.html",
   styleUrls: ["./admin-execution.component.scss"],
+  standalone: false,
 })
 export class AdminExecutionComponent implements OnInit, OnDestroy {
   listOfExecutions: ReadonlyArray<Execution> = [];

frontend/src/app/dashboard/component/admin/gmail/admin-gmail.component.ts

@@ -27,6 +27,7 @@ import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
   selector: "texera-gmail",
   templateUrl: "./admin-gmail.component.html",
   styleUrls: ["./admin-gmail.component.scss"],
+  standalone: false,
 })
 export class AdminGmailComponent implements OnInit {
   public validateForm!: FormGroup;