MAT-7887 Truncating definition comments in saved definitions

src/CqlBuilderPanel/definitionsSection/definitions/Definitions.tsx

@@ -20,6 +20,7 @@ import ToolTippedIcon from "../../../toolTippedIcon/ToolTippedIcon";
 import { CqlBuilderLookup, Lookup } from "../../../model/CqlBuilderLookup";
 import DefinitionBuilderDialog from "../definitionBuilderDialog/DefinitionBuilderDialog";
 import { Stack } from "@mui/material";
+import TruncateText from "../../../common/truncateText/TruncateText";
 
 const TH = tw.th`p-3 text-left text-sm font-bold capitalize`;
 const TD = tw.td`p-3 text-left text-sm w-1/2`;
@@ -105,6 +106,14 @@ const Definitions = ({
       {
         header: "Comment",
         accessorKey: "comment",
+        cell: (info) => {
+          return (
+            <TruncateText
+              text={info.row?.original?.comment}
+              dataTestId={`definition-comments`}
+            />
+          );
+        },
       },
       {
         header: "",

src/common/truncateText/TruncateText.test.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import TruncateText from "./TruncateText";
+import userEvent from "@testing-library/user-event";
+
+describe("TruncateText component", () => {
+  it("should render original value", () => {
+    const description = "TestDescription";
+    const testId = "definition-comments";
+
+    render(
+      <TruncateText text={description} maxLength={60} dataTestId={testId} />
+    );
+
+    expect(screen.getByTestId("definition-comments-content")).toBeTruthy();
+    expect(screen.getByText(description)).toBeInTheDocument();
+    expect(
+      screen.queryByTestId(`${testId}-toggle-button`)
+    ).not.toBeInTheDocument();
+  });
+
+  it("should render truncated value", async () => {
+    const description =
+      "TestDescriptionTestDescriptionTestDescriptionTestDescriptionTestDescriptionTestDescription";
+    const testId = "definition-comments";
+
+    render(
+      <TruncateText text={description} maxLength={60} dataTestId={testId} />
+    );
+
+    const content = screen.getByTestId("definition-comments-content");
+    expect(content).toBeTruthy();
+    expect(content).toHaveTextContent(description.substring(0, 60));
+
+    const showMoreButton = screen.getByTestId(`${testId}-toggle-button`);
+    expect(showMoreButton).toHaveTextContent("Show more");
+
+    userEvent.click(showMoreButton);
+    expect(content).toHaveTextContent(description);
+
+    expect(showMoreButton).toHaveTextContent("Show less");
+    expect(content).toHaveTextContent(description.substring(0, 60));
+  });
+});

src/common/truncateText/TruncateText.tsx

@@ -0,0 +1,38 @@
+import { IconButton } from "@mui/material";
+import React, { useState } from "react";
+
+const TruncateText = ({ text, maxLength = 120, dataTestId }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  if (!text || text.trim() === "") {
+    return null;
+  }
+
+  const toggleExpanded = () => setIsExpanded((prev) => !prev);
+
+  const displayedText = isExpanded ? text : text.slice(0, maxLength);
+
+  return (
+    <div data-testid={`${dataTestId}-content`}>
+      <span>{displayedText}</span>
+      {text.length > maxLength && (
+        <IconButton
+          onClick={toggleExpanded}
+          data-testid={`${dataTestId}-toggle-button`}
+          color={"primary"}
+          sx={{
+            marginLeft: "3px",
+            padding: "0",
+            cursor: "pointer",
+            textDecoration: "underline",
+            fontSize: "0.8rem",
+          }}
+        >
+          {isExpanded ? "Show less" : "Show more"}
+        </IconButton>
+      )}
+    </div>
+  );
+};
+
+export default TruncateText;