Bug fix pipeline editor (#3360)

* Add warning that live dashboard is deprecated * fix: Resolve minor issues in pipeline editor
apache · Nov 29, 2024 · c616fb3 · c616fb3
1 parent 2ea23c0
commit c616fb3
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 3 deletions.
diff --git a/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.html b/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.html
@@ -73,19 +73,22 @@ <h5>Possible placeholders:</h5>
                         (click)="applyPlaceholder(property.runtimeName)"
                         color="accent"
                         *ngFor="let property of eventSchemas[0].eventProperties"
+                        style="margin-right: 5px; margin-bottom: 5px"
                         >#{{ property.runtimeName }}#
                     </mat-chip>
                 </mat-chip-list>
             </div>
         </div>
         <div fxFlex="100" *ngIf="staticProperty.multiLine">
             <quill-editor
+                fxFlex="100"
                 *ngIf="staticProperty.htmlFontFormat"
                 #textEditor
                 formControlName="{{ fieldName }}"
                 [modules]="quillModulesFontFormat"
             ></quill-editor>
             <quill-editor
+                fxFlex="100"
                 *ngIf="!staticProperty.htmlFontFormat"
                 #textEditor
                 formControlName="{{ fieldName }}"

diff --git a/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.scss b/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.scss
@@ -29,6 +29,10 @@ form {
     float: left;
 }
 
+tags {
+    margin-bottom: 50px;
+}
+
 ::ng-deep.mat-accent ::ng-deep.mat-slider-track-fill,
 .mat-accent ::ng-deep.mat-slider-thumb,
 .mat-accent ::ng-deep.mat-slider-thumb-label {

diff --git a/...icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html b/...icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html
@@ -44,7 +44,12 @@
         </div>
     </div>
     <div fxFlex fxLayoutAlign="start start" fxLayout="column">
-        <div class="element-name" fxLayoutAlign="start start">
+        <div
+            [ngClass]="{
+                'element-name-hover': currentMouseOver,
+                'element-name': !currentMouseOver
+            }"
+        >
             {{ element.name }}
         </div>
         <div

diff --git a/...icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.scss b/...icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.scss
@@ -51,6 +51,19 @@
 .element-name {
     font-size: 11pt;
     font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    white-space: nowrap;
+    max-width: 170px;
+}
+
+.element-name-hover {
+    font-size: 11pt;
+    font-weight: 500;
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
+    word-break: break-word;
 }
 
 .element-description {

diff --git a/.../editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss b/.../editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss
@@ -93,7 +93,7 @@
 }
 
 .search-field {
-    width: 180px;
+    width: 230px;
 }
 
 .group-outer {

diff --git a/...itor/components/pipeline/dropped-pipeline-element/dropped-pipeline-element.component.html b/...itor/components/pipeline/dropped-pipeline-element/dropped-pipeline-element.component.html
@@ -62,7 +62,11 @@
         [pipelineElement]="pipelineElementConfig.payload"
     ></sp-pipeline-element>
 </div>
-<div class="editor-pe-info" [ngClass]="'pe-info-' + pipelineElementConfig.type">
+<div
+    class="editor-pe-info"
+    [ngClass]="'pe-info-' + pipelineElementConfig.type"
+    matTooltip="{{ pipelineElementConfig.payload.name }}"
+>
     {{ pipelineElementConfig.payload.name }}
 </div>
 <sp-pipeline-element-statistics

diff --git a/ui/src/scss/sp/pipeline-element-options.scss b/ui/src/scss/sp/pipeline-element-options.scss
@@ -41,6 +41,9 @@
     text-align: center;
     box-shadow: 0 0 2px #555;
     -webkit-animation: slidein 0.5s;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
 }
 
 @keyframes slidein {