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 1f2c2963f29..3cdd88911af 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 @@
+ class="operator-description" + nz-tooltip + [nzTooltipTitle]="operatorDescription" + nzTooltipPlacement="bottom">

{{ operatorDescription }}

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 4126a9ee1ce..0cd197f7a51 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 d394040a9fd..820f43b1a9b 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,34 @@ describe("OperatorPropertyEditFrameComponent", () => { fixture.detectChanges(); expect(component.operatorVersion).toEqual(mockScanPredicate.operatorVersion); }); + + describe("operator description truncation", () => { + it("should truncate text with CSS line-clamp when description is long", () => { + const p = document.createElement("p"); + p.style.overflow = "hidden"; + p.style.display = "-webkit-box"; + p.style.webkitLineClamp = "3"; + p.style.webkitBoxOrient = "vertical"; + p.textContent = + "Visualize data using a Bullet Chart that shows a primary quantitative bar and delta indicator. " + + "Optional elements such as qualitative ranges (steps) and a performance threshold are displayed only when provided."; + document.body.appendChild(p); + + expect(p.style.overflow).toBe("hidden"); + expect(p.style.webkitLineClamp).toBe("3"); + expect(p.style.webkitBoxOrient).toBe("vertical"); + expect(p.textContent?.length).toBeGreaterThan(100); + + document.body.removeChild(p); + }); + + it("should show tooltip attribute on description container", () => { + const div = document.createElement("div"); + div.setAttribute("nz-tooltip", ""); + div.setAttribute("nzTooltipPlacement", "bottom"); + + expect(div.hasAttribute("nz-tooltip")).toBe(true); + expect(div.getAttribute("nzTooltipPlacement")).toBe("bottom"); + }); + }); });