(texera) branch main updated: chore(frontend): fix NG8113/NG8107 template diagnostics, add test, promote to errors (#5985)

[gi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

github-merge-queue[bot] pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/texera.git


The following commit(s) were added to refs/heads/main by this push:
     new c16058b745 chore(frontend): fix NG8113/NG8107 template diagnostics, add test, promote to errors (#5985)
c16058b745 is described below

commit c16058b745c3263bf586d2dcf24c396a9bdda8f2
Author: Yicong Huang <17...@users.noreply.github.com>
AuthorDate: Sun Jun 28 22:30:26 2026 -0700

    chore(frontend): fix NG8113/NG8107 template diagnostics, add test, promote to errors (#5985)
    
    ### What changes were proposed in this PR?
    
    Fix the two remaining Angular extended-diagnostic warnings surfaced by
    the frontend build, add a unit test for the affected logic, and promote
    both checks to build errors so regressions can't silently creep back in:
    
    - **NG8113** — `CardItemComponent` listed `NzWaveDirective` in its
    standalone `imports` array but never used it in the template. Removed
    the unused directive import.
    - **NG8107** — `computing-unit-selection.component.html` used
    `pve.name?.trim()`, but `PveDraft.name` is a non-nullable `string`, so
    the optional chaining is redundant. Extracted the predicate into an
    `isCreateDisabled(pve)` component method bound via
    `[disabled]="isCreateDisabled(pve)"`, and added unit tests covering
    empty / whitespace / valid / padded names (the create button stays
    disabled until the env name has non-whitespace content).
    - **Enforcement** — set `unusedStandaloneImports` (NG8113) and
    `optionalChainNotNullable` (NG8107) to `"error"` under
    `angularCompilerOptions.extendedDiagnostics.checks`. Placed in
    `tsconfig.app.json` (the prod build, `build:ci`) rather than the base
    tsconfig, because `extendedDiagnostics` requires `strictTemplates`,
    which the unit-test builds deliberately disable; `tsconfig.test.json`
    clears the inherited option to avoid `NG4003`.
    
    No runtime behavior change.
    
    ### Any related issues, documentation, discussions?
    
    Closes #5984
    
    ### How was this PR tested?
    
    - `ng test` (the affected spec): **46 passed**, including the 4 new
    `isCreateDisabled` cases.
    - `ng build`: succeeds with **0** NG8113/NG8107 diagnostics (now
    configured as errors) and produces the normal bundle.
    
    ### Was this PR authored or co-authored using generative AI tooling?
    
    Generated-by: Claude Code (Claude Opus 4.8)
    
    ---------
    
    Co-authored-by: Claude Opus 4.8 (1M context) <no...@anthropic.com>
---
 .../list-item/card-item/card-item.component.ts     |  2 --
 .../computing-unit-selection.component.html        |  2 +-
 .../computing-unit-selection.component.spec.ts     | 24 ++++++++++++++++++++++
 .../computing-unit-selection.component.ts          |  8 ++++++++
 frontend/src/tsconfig.app.json                     | 12 ++++++++++-
 frontend/src/tsconfig.test.json                    |  6 +++++-
 6 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts
index 14f43f3ab4..ab0462bf06 100644
--- a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts
+++ b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts
@@ -37,7 +37,6 @@ import { NzButtonComponent } from "ng-zorro-antd/button";
 import { NzCheckboxComponent } from "ng-zorro-antd/checkbox";
 import { NzIconDirective } from "ng-zorro-antd/icon";
 import { NzPopconfirmDirective } from "ng-zorro-antd/popconfirm";
-import { NzWaveDirective } from "ng-zorro-antd/core/wave";
 import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
 import { NzModalRef, NzModalService } from "ng-zorro-antd/modal";
 import { DashboardEntry } from "src/app/dashboard/type/dashboard-entry";
@@ -79,7 +78,6 @@ import { isDefined } from "../../../../../common/util/predicate";
     NzIconDirective,
     NzButtonComponent,
     NzPopconfirmDirective,
-    NzWaveDirective,
     ɵNzTransitionPatchDirective,
   ],
 })
diff --git a/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.html b/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.html
index f6409f1aee..ae8738fe69 100644
--- a/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.html
+++ b/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.html
@@ -688,7 +688,7 @@
               nz-button
               nzType="primary"
               (click)="createVirtualEnvironment(envIndex)"
-              [disabled]="!pve.name?.trim()"
+              [disabled]="isCreateDisabled(pve)"
               [nzLoading]="pve.isInstalling">
               OK
             </button>
diff --git a/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.spec.ts b/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.spec.ts
index d02135458d..efa6700262 100644
--- a/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.spec.ts
+++ b/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.spec.ts
@@ -609,4 +609,28 @@ describe("PowerButtonComponent", () => {
       expect(runWsSpy).not.toHaveBeenCalled();
     });
   });
+
+  describe("isCreateDisabled", () => {
+    // Backs the per-environment OK button's [disabled]="isCreateDisabled(pve)":
+    // the button stays disabled until the name has non-whitespace content.
+    function pveWithName(name: string): any {
+      return { name } as any;
+    }
+
+    it("disables when the name is empty", () => {
+      expect(component.isCreateDisabled(pveWithName(""))).toBe(true);
+    });
+
+    it("disables when the name is only whitespace", () => {
+      expect(component.isCreateDisabled(pveWithName("   "))).toBe(true);
+    });
+
+    it("enables when the name has non-whitespace content", () => {
+      expect(component.isCreateDisabled(pveWithName("env1"))).toBe(false);
+    });
+
+    it("enables when a valid name is padded with whitespace", () => {
+      expect(component.isCreateDisabled(pveWithName("  env1  "))).toBe(false);
+    });
+  });
 });
diff --git a/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.ts b/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.ts
index 483a8f57d6..ac59584218 100644
--- a/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.ts
+++ b/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.ts
@@ -775,6 +775,14 @@ export class ComputingUnitSelectionComponent implements OnInit {
     return this.pves.some(p => p.isLocked && p.name.trim() === trimmed);
   }
 
+  /**
+   * Whether the per-environment "OK" (create/install) button should be
+   * disabled: true until the environment name has non-whitespace content.
+   */
+  isCreateDisabled(pve: PveDraft): boolean {
+    return !pve.name.trim();
+  }
+
   private refreshAvailableDbPves(): void {
     this.workflowPveService
       .listUserPves()
diff --git a/frontend/src/tsconfig.app.json b/frontend/src/tsconfig.app.json
index 6f84762b81..a05a55217b 100644
--- a/frontend/src/tsconfig.app.json
+++ b/frontend/src/tsconfig.app.json
@@ -6,7 +6,17 @@
   },
   // ask Angular to check template error during the compilation process
   "angularCompilerOptions": {
-    "fullTemplateTypeCheck": true
+    "fullTemplateTypeCheck": true,
+    // Promote these template diagnostics to build errors so regressions fail
+    // the prod build (build:ci). Kept here rather than in the base tsconfig
+    // because extendedDiagnostics requires strictTemplates, which the test
+    // builds (tsconfig.test.json / tsconfig.spec.json) deliberately disable.
+    "extendedDiagnostics": {
+      "checks": {
+        "unusedStandaloneImports": "error",
+        "optionalChainNotNullable": "error"
+      }
+    }
   },
   "files": ["main.ts"],
   "include": ["**/*.d.ts"]
diff --git a/frontend/src/tsconfig.test.json b/frontend/src/tsconfig.test.json
index 189bc3cc6a..743bb9f6b4 100644
--- a/frontend/src/tsconfig.test.json
+++ b/frontend/src/tsconfig.test.json
@@ -11,6 +11,10 @@
   "angularCompilerOptions": {
     "strictTemplates": false,
     "strictNullInputTypes": false,
-    "fullTemplateTypeCheck": false
+    "fullTemplateTypeCheck": false,
+    // extendedDiagnostics (inherited from tsconfig.app.json) requires
+    // strictTemplates, which this test build disables. Clear it to avoid
+    // NG4003; these diagnostics are enforced by the prod build instead.
+    "extendedDiagnostics": null
   }
 }