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

SvenO3 pushed a commit to branch 4725-cant-delete-code-in-javascript-evaluator
in repository https://gitbox.apache.org/repos/asf/streampipes.git

commit 6889d0d56c32008719dfe8c8c9550bfc2095e6f2
Author: Sven Oehler <[email protected]>
AuthorDate: Thu Jul 16 17:52:38 2026 +0200

    Fix output schema display
---
 .../user-defined-output.component.html             | 75 ++++++++++++----------
 .../user-defined-output.component.ts               |  5 +-
 2 files changed, 45 insertions(+), 35 deletions(-)

diff --git 
a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.html
 
b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.html
index baa4732b8b..3342ae3ff0 100644
--- 
a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.html
+++ 
b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.html
@@ -40,43 +40,52 @@
     @for (ep of outputStrategy.eventProperties; track ep; let i = $index) {
         <div fxFlex="100" fxLayout="row" fxLayoutGap="10px">
             <div fxLayout="column" fxFlex="30">
-                <mat-form-field fxFlex color="accent">
-                    <mat-label>{{ 'Runtime name' | translate }}</mat-label>
-                    <input
-                        [(ngModel)]="ep.runtimeName"
-                        data-cy="runtime-name"
-                        fxFlex
-                        matInput
-                    />
-                </mat-form-field>
+                <sp-form-field [level]="3" [label]="'Runtime name' | 
translate">
+                    <mat-form-field fxFlex color="accent">
+                        <input
+                            [(ngModel)]="ep.runtimeName"
+                            data-cy="runtime-name"
+                            fxFlex
+                            matInput
+                        />
+                    </mat-form-field>
+                </sp-form-field>
             </div>
             <div fxLayout="column" fxFlex="30">
-                <mat-form-field class="example-full-width" color="accent">
-                    <mat-label>{{ 'Runtime type' | translate }}</mat-label>
-                    <mat-select
-                        [(ngModel)]="ep.runtimeType"
-                        [disabled]="restrictedEditMode"
-                        data-cy="runtime-type"
-                    >
-                        @for (primitive of primitiveClasses; track primitive) {
-                            <mat-option [value]="primitive.id">
-                                {{ primitive.label }}
-                            </mat-option>
-                        }
-                    </mat-select>
-                </mat-form-field>
+                <sp-form-field [level]="3" [label]="'Runtime type' | 
translate">
+                    <mat-form-field class="example-full-width" color="accent">
+                        <mat-select
+                            [(ngModel)]="ep.runtimeType"
+                            [disabled]="restrictedEditMode"
+                            data-cy="runtime-type"
+                        >
+                            @for (
+                                primitive of primitiveClasses;
+                                track primitive
+                            ) {
+                                <mat-option [value]="primitive.id">
+                                    {{ primitive.label }}
+                                </mat-option>
+                            }
+                        </mat-select>
+                    </mat-form-field>
+                </sp-form-field>
             </div>
             <div fxLayout="column" fxFlex="30">
-                <mat-form-field fxFlex color="accent">
-                    <mat-label>{{ 'Semantic type' | translate }}</mat-label>
-                    <input
-                        [(ngModel)]="ep.semanticType"
-                        [disabled]="restrictedEditMode"
-                        data-cy="semantic-type"
-                        fxFlex
-                        matInput
-                    />
-                </mat-form-field>
+                <sp-form-field
+                    [level]="3"
+                    [label]="'Semantic type' | translate"
+                >
+                    <mat-form-field fxFlex color="accent">
+                        <input
+                            [(ngModel)]="ep.semanticType"
+                            [disabled]="restrictedEditMode"
+                            data-cy="semantic-type"
+                            fxFlex
+                            matInput
+                        />
+                    </mat-form-field>
+                </sp-form-field>
             </div>
             <div fxLayout="column" fxFlex="10">
                 <button
diff --git 
a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts
 
b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts
index 2ac2e5f7d3..c855382ff3 100644
--- 
a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts
+++ 
b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts
@@ -32,11 +32,12 @@ import {
     LayoutGapDirective,
 } from '@ngbracket/ngx-layout/flex';
 import { MatButton, MatIconButton } from '@angular/material/button';
-import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatFormField } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { MatOption, MatSelect } from '@angular/material/select';
 import { MatIcon } from '@angular/material/icon';
 import { TranslatePipe } from '@ngx-translate/core';
+import { FormFieldComponent } from '@streampipes/shared-ui';
 
 @Component({
     selector: 'sp-user-defined-output-strategy',
@@ -48,8 +49,8 @@ import { TranslatePipe } from '@ngx-translate/core';
         LayoutAlignDirective,
         MatButton,
         LayoutGapDirective,
+        FormFieldComponent,
         MatFormField,
-        MatLabel,
         MatInput,
         FormsModule,
         MatSelect,

Reply via email to