[ZEPPELIN-6427] Convert interpreter setting form to typed reactive forms

zeppelin-web-angular/src/app/interfaces/interpreter.ts

@@ -65,13 +65,48 @@ interface SnapshotPolicy {
 interface Properties {
   [key: string]: {
     name: string;
-    value: boolean;
-    type: string;
+    value: string | number | boolean | null;
+    type: InterpreterPropertyTypes;
     defaultValue?: string;
     description?: string;
   };
 }
 
+export interface InterpreterPropertyValue {
+  name: string;
+  value: string | boolean;
+  type: InterpreterPropertyTypes;
+}
+
+/**
+ * Request shape for creating/updating an interpreter setting.
+ * Mirrors the fields the server actually reads (InterpreterOption.java) —
+ * UI-only state such as `session`/`process` must not be sent.
+ */
+export interface InterpreterSettingOption {
+  isExistingProcess: boolean;
+  isUserImpersonate: boolean;
+  owners: string[];
+  perNote: string;
+  perUser: string;
+  /** null is accepted by the server and kept as the default -1 (unset) */
+  port: number | null;
+  host: string;
+  remote: boolean;
+  setPermission: boolean;
+}
+
+export interface InterpreterSettingRequest {
+  name: string;
+  group: string;
+  option: InterpreterSettingOption;
+  properties: Record<string, InterpreterPropertyValue>;
+  dependencies: Array<{
+    groupArtifactVersion: string;
+    exclusions: string[];
+  }>;
+}
+
 interface InterpreterGroupItem {
   name: string;
   class: string;
@@ -91,14 +126,19 @@ interface DependenciesItem {
   exclusions: string[];
 }
 
+/**
+ * Response shape of InterpreterOption.java serialized by Gson.
+ * Primitive boolean/int fields are always present; String/List fields
+ * are omitted when null (e.g. fresh option templates from GET /interpreter).
+ */
 interface Option {
   remote: boolean;
   port: number;
   isExistingProcess: boolean;
   setPermission: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  owners: any[];
   isUserImpersonate: boolean;
+  host?: string;
+  owners?: string[];
   perNote?: string;
   perUser?: string;
 }

zeppelin-web-angular/src/app/pages/workspace/interpreter/interpreter.component.ts

@@ -17,7 +17,12 @@ import { debounceTime } from 'rxjs/operators';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalService } from 'ng-zorro-antd/modal';
 
-import { Interpreter, InterpreterPropertyTypes, InterpreterRepository } from '@zeppelin/interfaces';
+import {
+  Interpreter,
+  InterpreterPropertyTypes,
+  InterpreterRepository,
+  InterpreterSettingRequest
+} from '@zeppelin/interfaces';
 import { InterpreterService } from '@zeppelin/services';
 
 import { InterpreterCreateRepositoryModalComponent } from './create-repository-modal/create-repository-modal.component';
@@ -75,7 +80,7 @@ export class InterpreterComponent implements OnInit, OnDestroy {
     });
   }
 
-  addInterpreterSetting(data: Interpreter): void {
+  addInterpreterSetting(data: InterpreterSettingRequest): void {
     this.interpreterService.addInterpreterSetting(data).subscribe(res => {
       this.interpreterSettings.push(res);
       this.showCreateSetting = false;
@@ -84,7 +89,7 @@ export class InterpreterComponent implements OnInit, OnDestroy {
     });
   }
 
-  updateInterpreter(data: Interpreter): void {
+  updateInterpreter(data: InterpreterSettingRequest): void {
     this.interpreterService.updateInterpreter(data).subscribe(res => {
       const current = this.interpreterSettings.find(e => e.name === res.name);
       if (current) {

zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.html

@@ -257,6 +257,7 @@ <h3 class="form-title">Option</h3>
         <nz-form-control>
           <input
             nz-input
+            type="number"
             formControlName="port"
             placeholder=""
             pattern="^()([1-9]|[1-5]?[0-9]{2,4}|6[1-4][0-9]{3}|65[1-4][0-9]{2}|655[1-2][0-9]|6553[1-5])$"
@@ -355,7 +356,7 @@ <h3 class="form-title">Properties</h3>
                       ******
                     }
                     @case ('url') {
-                      <a [href]="control.get('value')?.value || ''" target="_blank">
+                      <a [href]="(control.get('value')?.value ?? '').toString()" target="_blank">
                         {{ control.get('value')?.value || '' }}
                       </a>
                     }