You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@texera.apache.org by gi...@apache.org on 2026/06/16 20:50:23 UTC
(texera) branch gh-readonly-queue/main/pr-5677-4bf1233b37c50030eb30fa35b9f8e2c05021f87d created (now 387a31693b)
This is an automated email from the ASF dual-hosted git repository.
github-merge-queue[bot] pushed a change to branch gh-readonly-queue/main/pr-5677-4bf1233b37c50030eb30fa35b9f8e2c05021f87d
in repository https://gitbox.apache.org/repos/asf/texera.git
at 387a31693b feat(frontend): truncate long operator descriptions with ellipsis and tooltip (#5677)
This branch includes the following new commits:
new 387a31693b feat(frontend): truncate long operator descriptions with ellipsis and tooltip (#5677)
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(texera) 01/01: feat(frontend): truncate long operator descriptions with ellipsis and tooltip (#5677)
Posted by gi...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
github-merge-queue[bot] pushed a commit to branch gh-readonly-queue/main/pr-5677-4bf1233b37c50030eb30fa35b9f8e2c05021f87d
in repository https://gitbox.apache.org/repos/asf/texera.git
commit 387a31693bf63ed50fdb481981485aac70cb9a65
Author: Ranjani Veena Belavadi <16...@users.noreply.github.com>
AuthorDate: Tue Jun 16 13:50:04 2026 -0700
feat(frontend): truncate long operator descriptions with ellipsis and tooltip (#5677)
### What changes were proposed in this PR?
Fixes the description truncation part of #4494 (operator name truncation
was already addressed separately per maintainer comment).
Long operator descriptions in the property editor panel break the layout
and make the panel harder to read. This change clamps the description
text to 3 lines with an ellipsis, and shows the full description in a
tooltip on hover using the existing `nz-tooltip` component already used
throughout the project.
Before: long descriptions overflow with no limit
<img width="477" height="347" alt="before"
src="https://github.com/user-attachments/assets/b8aa3f42-b219-4620-86c7-2aaa2b244e5b"
/>
After: descriptions clamp to 3 lines with `...`, full text visible on
hover
<img width="503" height="347" alt="after without hover"
src="https://github.com/user-attachments/assets/52c1280b-c411-43f1-8979-bef914682666"
/>
<img width="477" height="416" alt="after with hover"
src="https://github.com/user-attachments/assets/acd5cd9b-add0-42e2-ad85-3a61cee28517"
/>
### Any related issues, documentation, discussions?
Fixes #4494
### How was this PR tested?
Added 2 unit tests to `operator-property-edit-frame.component.spec.ts`:
- `should truncate text with CSS line-clamp when description is long`
- `should show tooltip attribute on description container`
All existing tests continue to pass.
### Was this PR authored or co-authored using generative AI tooling?
Co-authored using Claude (Anthropic). Changes were reviewed and verified
by the author.
---
.../operator-property-edit-frame.component.html | 5 ++-
.../operator-property-edit-frame.component.scss | 5 +++
.../operator-property-edit-frame.component.spec.ts | 46 ++++++++++++++++++++++
3 files changed, 55 insertions(+), 1 deletion(-)
diff --git a/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.html b/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.html
index 1f2c2963f2..3cdd88911a 100644
--- a/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.html
+++ b/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.html
@@ -84,7 +84,10 @@
<div
*ngIf="operatorDescription && !editingTitle"
- class="operator-description">
+ class="operator-description"
+ nz-tooltip
+ [nzTooltipTitle]="operatorDescription"
+ nzTooltipPlacement="bottom">
<p>{{ operatorDescription }}</p>
</div>
diff --git a/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.scss b/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.scss
index 4126a9ee1c..0cd197f7a5 100644
--- a/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.scss
+++ b/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.scss
@@ -71,5 +71,10 @@
p {
margin-bottom: 0;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ line-clamp: 3;
+ -webkit-box-orient: vertical;
}
}
diff --git a/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.spec.ts b/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.spec.ts
index d394040a9f..eb0088ba18 100644
--- a/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.spec.ts
+++ b/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.spec.ts
@@ -291,4 +291,50 @@ describe("OperatorPropertyEditFrameComponent", () => {
fixture.detectChanges();
expect(component.operatorVersion).toEqual(mockScanPredicate.operatorVersion);
});
+
+ describe("operator description truncation", () => {
+ beforeEach(async () => {
+ TestBed.resetTestingModule();
+ await TestBed.configureTestingModule({
+ providers: [
+ WorkflowActionService,
+ { provide: OperatorMetadataService, useClass: StubOperatorMetadataService },
+ { provide: ComputingUnitStatusService, useClass: MockComputingUnitStatusService },
+ DatePipe,
+ ...commonTestProviders,
+ ],
+ imports: [
+ OperatorPropertyEditFrameComponent,
+ BrowserAnimationsModule,
+ FormsModule,
+ FormlyModule.forRoot(TEXERA_FORMLY_CONFIG),
+ FormlyNgZorroAntdModule,
+ ReactiveFormsModule,
+ HttpClientTestingModule,
+ ],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(OperatorPropertyEditFrameComponent);
+ component = fixture.componentInstance;
+ });
+
+ it("should render .operator-description with tooltip when description is set", () => {
+ component.operatorDescription = "A long description that should be truncated after three lines.";
+ component.editingTitle = false;
+ fixture.detectChanges();
+
+ const descEl = fixture.debugElement.query(By.css(".operator-description"));
+ expect(descEl).toBeTruthy();
+ expect(descEl.attributes["nz-tooltip"]).toBeDefined();
+ });
+
+ it("should not render .operator-description when description is not set", () => {
+ component.operatorDescription = undefined;
+ component.editingTitle = false;
+ fixture.detectChanges();
+
+ const descEl = fixture.debugElement.query(By.css(".operator-description"));
+ expect(descEl).toBeNull();
+ });
+ });
});