feat(frontend): add Python UDF UI parameter form support

frontend/package.json

@@ -38,6 +38,7 @@
     "@codingame/monaco-vscode-java-default-extension": "8.0.4",
     "@codingame/monaco-vscode-python-default-extension": "8.0.4",
     "@codingame/monaco-vscode-r-default-extension": "8.0.4",
+    "@lezer/python": "1.1.18",
     "@ngneat/until-destroy": "8.1.4",
     "@ngx-formly/core": "6.3.12",
     "@ngx-formly/ng-zorro-antd": "6.3.12",

frontend/src/app/app.module.ts

@@ -156,6 +156,7 @@ import { NzTreeModule } from "ng-zorro-antd/tree";
 import { NzTreeViewModule } from "ng-zorro-antd/tree-view";
 import { NzNoAnimationModule } from "ng-zorro-antd/core/animation";
 import { TreeModule } from "@ali-hm/angular-tree-component";
+import { UiUdfParametersComponent } from "./workspace/component/ui-udf-parameters/ui-udf-parameters.component";
 import { ResultExportationComponent } from "./workspace/component/result-exportation/result-exportation.component";
 import { ReportGenerationService } from "./workspace/service/report-generation/report-generation.service";
 import { SearchBarComponent } from "./dashboard/component/user/search-bar/search-bar.component";
@@ -265,6 +266,7 @@ registerLocaleData(en);
     NzGridModule,
     ScrollingModule,
     FormlyRepeatDndComponent,
+    UiUdfParametersComponent,
     AdminGmailComponent,
     PublicProjectComponent,
     WorkspaceComponent,

frontend/src/app/common/formly/formly-config.ts

@@ -27,6 +27,7 @@ import { PresetWrapperComponent } from "./preset-wrapper/preset-wrapper.componen
 import { DatasetFileSelectorComponent } from "../../workspace/component/dataset-file-selector/dataset-file-selector.component";
 import { CollabWrapperComponent } from "./collab-wrapper/collab-wrapper/collab-wrapper.component";
 import { FormlyRepeatDndComponent } from "./repeat-dnd/repeat-dnd.component";
+import { UiUdfParametersComponent } from "../../workspace/component/ui-udf-parameters/ui-udf-parameters.component";
 import { DatasetVersionSelectorComponent } from "../../workspace/component/dataset-version-selector/dataset-version-selector.component";
 
 /**
@@ -80,6 +81,7 @@ export const TEXERA_FORMLY_CONFIG = {
     { name: "inputautocomplete", component: DatasetFileSelectorComponent, wrappers: ["form-field"] },
     { name: "datasetversionselector", component: DatasetVersionSelectorComponent, wrappers: ["form-field"] },
     { name: "repeat-section-dnd", component: FormlyRepeatDndComponent },
+    { name: "ui-udf-parameters", component: UiUdfParametersComponent, wrappers: ["form-field"] },
   ],
   wrappers: [
     { name: "preset-wrapper", component: PresetWrapperComponent },

frontend/src/app/workspace/component/ui-udf-parameters/ui-udf-parameters.component.html

@@ -0,0 +1,55 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+-->
+<div
+  class="ui-udf-param-list"
+  *ngIf="(model?.length ?? 0) > 0">
+  <!-- Optional header row -->
+  <div class="ui-udf-param-row header">
+    <div class="field-cell"><span class="col-title">Value</span></div>
+    <div class="field-cell"><span class="col-title">Name</span></div>
+    <div class="field-cell"><span class="col-title">Type</span></div>
+  </div>
+
+  <div
+    class="ui-udf-param-row"
+    *ngFor="let param of (model || []); let i = index; trackBy: trackByParamName">
+    <ng-container *ngIf="field.fieldGroup?.[i] as rowField">
+      <!-- Value -->
+      <div class="field-cell">
+        <ng-container *ngIf="getValueField(rowField) as valueField">
+          <formly-field [field]="valueField"></formly-field>
+        </ng-container>
+      </div>
+
+      <!-- Name -->
+      <div class="field-cell">
+        <ng-container *ngIf="getNameField(rowField) as nameField">
+          <formly-field [field]="nameField"></formly-field>
+        </ng-container>
+      </div>
+
+      <!-- Type -->
+      <div class="field-cell">
+        <ng-container *ngIf="getTypeField(rowField) as typeField">
+          <formly-field [field]="typeField"></formly-field>
+        </ng-container>
+      </div>
+    </ng-container>
+  </div>
+</div>

frontend/src/app/workspace/component/ui-udf-parameters/ui-udf-parameters.component.scss

@@ -0,0 +1,39 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.ui-udf-param-row {
+  display: grid;
+  grid-template-columns: 250px 250px 1fr;
+  gap: 12px;
+  align-items: start;
+}
+
+.field-cell {
+  min-width: 0;
+}
+
+/* Remove Formly/Ant label spacing */
+:host ::ng-deep .ant-form-item {
+  margin-bottom: 0;
+}
+
+/* Hide Formly labels*/
+:host ::ng-deep .ant-form-item-label {
+  display: none;
+}

frontend/src/app/workspace/component/ui-udf-parameters/ui-udf-parameters.component.ts

@@ -0,0 +1,93 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Component } from "@angular/core";
+import { NgFor, NgIf } from "@angular/common";
+import { FieldArrayType, FormlyFieldConfig, FormlyModule } from "@ngx-formly/core";
+
+@Component({
+  selector: "texera-ui-udf-parameters",
+  templateUrl: "./ui-udf-parameters.component.html",
+  styleUrls: ["./ui-udf-parameters.component.scss"],
+  imports: [NgIf, NgFor, FormlyModule],
+})
+export class UiUdfParametersComponent extends FieldArrayType {
+  private getField(rowField: FormlyFieldConfig, key: string): FormlyFieldConfig | undefined {
+    return rowField.fieldGroup?.find(f => f.key === key);
+  }
+
+  private getAttributeChild(rowField: FormlyFieldConfig, childKey: string): FormlyFieldConfig | undefined {
+    const attributeGroup = this.getField(rowField, "attribute");
+    return attributeGroup?.fieldGroup?.find(f => f.key === childKey);
+  }
+
+  private setDisabled(field: FormlyFieldConfig | undefined, disabled: boolean): FormlyFieldConfig | undefined {
+    if (!field) return undefined;
+
+    // 1) Modern Formly
+    field.props = { ...(field.props ?? {}), disabled };
+
+    // 2) Compatibility for templates/wrappers still using templateOptions
+    // (`as any` so we don't get nagged by the @deprecated JSDoc)
+    (field as any).templateOptions = { ...((field as any).templateOptions ?? {}), disabled };
+
+    // 3) Enforce at the reactive form level
+    if (field.formControl) {
+      if (disabled) {
+        field.formControl.disable({ emitEvent: false });
+      } else {
+        field.formControl.enable({ emitEvent: false });
+      }
+    } else {
+      // If control isn't created yet, disable it at init time.
+      const prevOnInit = field.hooks?.onInit;
+      field.hooks = {
+        ...(field.hooks ?? {}),
+        onInit: f => {
+          prevOnInit?.(f);
+          if (disabled) {
+            f.formControl?.disable({ emitEvent: false });
+          } else {
+            f.formControl?.enable({ emitEvent: false });
+          }
+        },
+      };
+    }
+
+    return field;
+  }
+
+  // Disable Name
+  getNameField(rowField: FormlyFieldConfig): FormlyFieldConfig | undefined {
+    return this.setDisabled(this.getAttributeChild(rowField, "attributeName"), true);
+  }
+
+  // Disable Type
+  getTypeField(rowField: FormlyFieldConfig): FormlyFieldConfig | undefined {
+    return this.setDisabled(this.getAttributeChild(rowField, "attributeType"), true);
+  }
+
+  // Value editable
+  getValueField(rowField: FormlyFieldConfig): FormlyFieldConfig | undefined {
+    return this.setDisabled(this.getField(rowField, "value"), false);
+  }
+
+  trackByParamName = (index: number, param: any): string | number => {
+    return param?.attribute?.attributeName ?? index;
+  };
+}