TT-14336: Update text ellipsis with functionality to truncate values in front and in the end (#416)

* feat: add truncateFrom property to support dots and truncation logic

* build: add alpha version

* feat: add className property to text ellipsis

* feat: add style and overlayClassName property to ellipsis to make it possible to pass z-index to floating container

* build: changes after prod build run and version grade without alpha suffix

---------

Co-authored-by: Vlad Zabolotnyi <vlad.z@tyk.io>

Author: vladzabolotnyi

lib/index.js

@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "4.4.25",
+  "version": "4.4.26",
   "description": "Tyk UI - ui reusable components",
   "main": "src/index.js",
   "scripts": {

lib/index.js.map

@@ -1,34 +1,180 @@
-import React from 'react';
-import TextEllipsis from './index';
+import React from "react";
+import TextEllipsis from "./index";
 
-function Component() {
+/* eslint-disable react/prop-types */
+function Component({ truncateFrom = "end" }) {
   return (
-    <div className="text-ellipsis" style={{ marginTop: '200px', textAlign: 'center' }}>
+    <div
+      className="text-ellipsis"
+      style={{ marginTop: "200px", textAlign: "center" }}
+    >
       <TextEllipsis
         text="alpha, bravo, charlie, delta, forgot the rest"
         limit={10}
+        truncateFrom={truncateFrom}
       />
     </div>
   );
 }
 
-describe('TextEllipsis', () => {
+function TruncateFromStartComponent() {
+  return (
+    <div
+      className="text-ellipsis-start"
+      style={{ marginTop: "200px", textAlign: "center" }}
+    >
+      <TextEllipsis
+        text="alpha, bravo, charlie, delta, forgot the rest"
+        limit={8}
+        truncateFrom="start"
+      />
+    </div>
+  );
+}
+
+function ShortTextComponent() {
+  return (
+    <div
+      className="text-ellipsis-short"
+      style={{ marginTop: "200px", textAlign: "center" }}
+    >
+      <TextEllipsis text="short" limit={10} truncateFrom="start" />
+    </div>
+  );
+}
+
+describe("TextEllipsis", () => {
   const classes = {
-    floatingContainer: 'floating-container',
+    floatingContainer: "floating-container",
   };
-  it('should show just first 10 chars followed by "..."', () => {
-    cy.mount(<Component />)
-      .get('.text-ellipsis')
-      .should('have.text', 'alpha, bra...');
+
+  describe("Default behavior (truncate from end)", () => {
+    it('should show first 10 chars followed by "..." when no truncateFrom is provided', () => {
+      cy.mount(<Component />)
+        .get(".text-ellipsis")
+        .should("have.text", "alpha, bra...");
+    });
+
+    it('should show first 10 chars followed by "..." when truncateFrom is explicitly set to end', () => {
+      cy.mount(<Component truncateFrom="end" />)
+        .get(".text-ellipsis")
+        .should("have.text", "alpha, bra...");
+    });
+
+    it("when hovering the truncated text, shows the tooltip with full text", () => {
+      cy.mount(<Component />);
+      cy.get(`.${classes.floatingContainer}`)
+        .should("not.exist")
+        .get(".text-ellipsis")
+        .trigger("mouseover");
+
+      cy.get(`.${classes.floatingContainer}`)
+        .should(
+          "contain.text",
+          "alpha, bravo, charlie, delta, forgot the rest",
+        );
+    });
+  });
+
+  describe("Truncate from start behavior", () => {
+    it('should show "..." at the beginning followed by last 10 chars when truncateFrom is start', () => {
+      cy.mount(<TruncateFromStartComponent />)
+        .get(".text-ellipsis-start")
+        .should("have.text", "...the rest");
+    });
+
+    it("when hovering the start-truncated text, shows the tooltip with full text", () => {
+      cy.mount(<TruncateFromStartComponent />);
+      cy.get(`.${classes.floatingContainer}`)
+        .should("not.exist")
+        .get(".text-ellipsis-start")
+        .trigger("mouseover");
+
+      cy.get(`.${classes.floatingContainer}`)
+        .should(
+          "contain.text",
+          "alpha, bravo, charlie, delta, forgot the rest",
+        );
+    });
+
+    it("should handle certificate-like IDs properly when truncating from start", () => {
+      const certificateId = "69ba61ddb8365d96f9917d7222cee600fadd3b0cd35d060b20e33182f7edae9f3a0373def3f4a50004d181ad";
+      cy.mount(
+        <div className="certificate-test">
+          <TextEllipsis text={certificateId} limit={10} truncateFrom="start" />
+        </div>,
+      )
+        .get(".certificate-test")
+        .should("have.text", "...0004d181ad");
+    });
   });
-  it('when hovering the shrinked texts, shows the tooltip with full text', () => {
-    cy.mount(<Component />);
-    cy.get(`.${classes.floatingContainer}`)
-      .should('not.exist')
-      .get('.text-ellipsis')
-      .trigger('mouseover');
-
-    cy.get(`.${classes.floatingContainer}`)
-      .should('exist');
+
+  describe("Edge cases", () => {
+    it("should display full text without ellipsis when text length is less than limit", () => {
+      cy.mount(<ShortTextComponent />)
+        .get(".text-ellipsis-short")
+        .should("have.text", "short")
+        .should("not.contain", "...");
+    });
+
+    it("should display full text without ellipsis when text length equals limit", () => {
+      cy.mount(
+        <div className="text-ellipsis-equal">
+          <TextEllipsis text="exactly10c" limit={10} truncateFrom="start" />
+        </div>,
+      )
+        .get(".text-ellipsis-equal")
+        .should("have.text", "exactly10c")
+        .should("not.contain", "...");
+    });
+
+    it("should handle single character limit correctly for truncateFrom start", () => {
+      cy.mount(
+        <div className="single-char-start">
+          <TextEllipsis text="hello world" limit={1} truncateFrom="start" />
+        </div>,
+      )
+        .get(".single-char-start")
+        .should("have.text", "...d");
+    });
+
+    it("should handle single character limit correctly for truncateFrom end", () => {
+      cy.mount(
+        <div className="single-char-end">
+          <TextEllipsis text="hello world" limit={1} truncateFrom="end" />
+        </div>,
+      )
+        .get(".single-char-end")
+        .should("have.text", "h...");
+    });
+  });
+
+  describe("Backward compatibility", () => {
+    it("should maintain existing behavior when truncateFrom prop is not provided", () => {
+      cy.mount(
+        <div className="text-ellipsis-backward">
+          <TextEllipsis
+            text="this is a long text for testing backward compatibility"
+            limit={15}
+          />
+        </div>,
+      )
+        .get(".text-ellipsis-backward")
+        .should("have.text", "this is a long ...");
+    });
+
+    it("should work with existing props combination", () => {
+      cy.mount(
+        <div className="existing-usage">
+          <TextEllipsis
+            text="existing implementation should still work"
+            limit={8}
+            position="top"
+          />
+        </div>,
+      )
+        .get(".existing-usage")
+        .should("have.text", "existing...");
+    });
   });
 });

lib/tyk-ui.js

@@ -1,32 +1,58 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Tooltip from '../Tooltip';
+import React from "react";
+import PropTypes from "prop-types";
+import Tooltip from "../Tooltip";
 /**
  * TextEllipsis component helps you to hide a part of a text,
  * but displaying it when it's being hovered.
  * The entire text is displayed with the help of Tooltip component
  */
 
-function TextEllipsis({ text, limit, position }) {
+function TextEllipsis({
+  style,
+  className,
+  overlayClassName,
+  text,
+  limit,
+  position,
+  truncateFrom = "end",
+}) {
+  if (text.length <= limit) {
+    return text;
+  }
+
+  let displayText;
+
+  if (truncateFrom === "start") {
+    displayText = `...${text.substring(text.length - limit)}`;
+  } else {
+    displayText = `${text.substring(0, limit)}...`;
+  }
+
   return (
-    text.length > limit
-      ? (
-        <Tooltip render={text} position={position}>
-          {text.substring(0, limit)}
-          ...
-        </Tooltip>
-      )
-      : text
+    <Tooltip
+      style={style}
+      overlayClassName={overlayClassName}
+      className={className}
+      render={text}
+      position={position}
+    >
+      {displayText}
+    </Tooltip>
   );
 }
 
 TextEllipsis.propTypes = {
+  style: PropTypes.instanceOf(Object),
+  className: PropTypes.string,
+  overlayClassName: PropTypes.string,
   /** Text to be shrinked by TextEllipsis */
   text: PropTypes.string,
   /** Number of characters that TextEllipsis would leave visible */
   limit: PropTypes.number,
   /** tooltip position */
   position: PropTypes.string,
+  /** Where to truncate text from - 'end' (default) shows beginning of text, 'start' shows end of text */
+  truncateFrom: PropTypes.oneOf(["end", "start"]),
 };
 
 export default TextEllipsis;

lib/tyk-ui.js.map

@@ -9,6 +9,7 @@ import Icon from '../Icon';
 function Tooltip({
   render,
   className,
+  overlayClassName,
   children,
   position = 'auto',
   style,
@@ -60,6 +61,7 @@ function Tooltip({
       {children}
       {isActive && (
         <FloatingContainer
+          className={overlayClassName}
           element={wrapperRef}
           forceDisplay={position}
           preferredPosition="top"
@@ -107,6 +109,7 @@ Tooltip.propTypes = {
   ]),
   /** additional tooltip classes */
   className: PropTypes.string,
+  overlayClassName: PropTypes.string,
   /** if `true` displays the "question mark" icon;
    * optionally you can pass a different icon
   */