diff --git a/src/CqlBuilderPanel/definitionsSection/definitions/Definitions.tsx b/src/CqlBuilderPanel/definitionsSection/definitions/Definitions.tsx
index 14099fb3..fef7c754 100644
--- a/src/CqlBuilderPanel/definitionsSection/definitions/Definitions.tsx
+++ b/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 (
+
+ );
+ },
},
{
header: "",
diff --git a/src/common/truncateText/TruncateText.test.tsx b/src/common/truncateText/TruncateText.test.tsx
new file mode 100644
index 00000000..a13e8a9f
--- /dev/null
+++ b/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(
+
+ );
+
+ 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(
+
+ );
+
+ 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));
+ });
+});
diff --git a/src/common/truncateText/TruncateText.tsx b/src/common/truncateText/TruncateText.tsx
new file mode 100644
index 00000000..cb8f6549
--- /dev/null
+++ b/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 (
+
+ {displayedText}
+ {text.length > maxLength && (
+
+ {isExpanded ? "Show less" : "Show more"}
+
+ )}
+
+ );
+};
+
+export default TruncateText;