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 <[email protected]> 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(); + }); + }); });
