From 5f058084dad4b0c5f72c2ef40c49d57c2dc26cfd Mon Sep 17 00:00:00 2001 From: Rohit Kandimalla Date: Wed, 18 Dec 2024 22:00:56 -0500 Subject: [PATCH 1/3] MAT-7887 Truncating definition comments in saved definitions --- .../definitions/Definitions.tsx | 9 ++++ src/common/truncateText/TruncateText.test.tsx | 44 +++++++++++++++++++ src/common/truncateText/TruncateText.tsx | 38 ++++++++++++++++ 3 files changed, 91 insertions(+) create mode 100644 src/common/truncateText/TruncateText.test.tsx create mode 100644 src/common/truncateText/TruncateText.tsx 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; From efb83484b854e35f797d13a39832c4d34dc428d1 Mon Sep 17 00:00:00 2001 From: Rohit Kandimalla Date: Fri, 20 Dec 2024 11:10:13 -0500 Subject: [PATCH 2/3] MAT-7887 using TruncateText component from design-systems --- package-lock.json | 290 +++++++++--------- package.json | 2 +- .../definitions/Definitions.tsx | 2 +- src/common/truncateText/TruncateText.test.tsx | 44 --- src/common/truncateText/TruncateText.tsx | 38 --- 5 files changed, 152 insertions(+), 224 deletions(-) delete mode 100644 src/common/truncateText/TruncateText.test.tsx delete mode 100644 src/common/truncateText/TruncateText.tsx diff --git a/package-lock.json b/package-lock.json index e0f9ad0e..89fb38d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.6", "dependencies": { "@madie/cql-antlr-parser": "^1.0.9", - "@madie/madie-design-system": "^1.2.39", + "@madie/madie-design-system": "^1.2.41", "@material-ui/core": "^4.12.4", "@mui/icons-material": "^5.5.1", "@mui/lab": "^5.0.0-alpha.73", @@ -1954,9 +1954,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.25.7", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz", - "integrity": "sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz", + "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==", "license": "MIT", "dependencies": { "regenerator-runtime": "^0.14.0" @@ -2052,9 +2052,9 @@ } }, "node_modules/@cmsgov/design-system/node_modules/chalk": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", - "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.0.tgz", + "integrity": "sha512-ZkD35Mx92acjB2yNJgziGqT9oKHEOxjTBTDRpOsRWtdecL/0jM3z5kM/CTzHWvHIen1GvkM85p6TuFfDGfc8/Q==", "license": "MIT", "engines": { "node": "^12.17.0 || ^14.13 || >=16.0.0" @@ -2394,14 +2394,14 @@ "license": "MIT" }, "node_modules/@emotion/cache": { - "version": "11.13.1", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz", - "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==", + "version": "11.14.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz", + "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==", "license": "MIT", "dependencies": { "@emotion/memoize": "^0.9.0", "@emotion/sheet": "^1.4.0", - "@emotion/utils": "^1.4.0", + "@emotion/utils": "^1.4.2", "@emotion/weak-memoize": "^0.4.0", "stylis": "4.2.0" } @@ -2452,15 +2452,15 @@ } }, "node_modules/@emotion/serialize": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz", - "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz", + "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==", "license": "MIT", "dependencies": { "@emotion/hash": "^0.9.2", "@emotion/memoize": "^0.9.0", "@emotion/unitless": "^0.10.0", - "@emotion/utils": "^1.4.1", + "@emotion/utils": "^1.4.2", "csstype": "^3.0.2" } }, @@ -2515,9 +2515,9 @@ } }, "node_modules/@emotion/utils": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz", - "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==", + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz", + "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==", "license": "MIT" }, "node_modules/@emotion/weak-memoize": { @@ -2725,9 +2725,9 @@ "license": "BSD-3-Clause" }, "node_modules/@inquirer/figures": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.7.tgz", - "integrity": "sha512-m+Trk77mp54Zma6xLkLuY+mvanPxlE4A7yNKs2HBiyZ4UkVs28Mv5c/pgWrHeInx+USHeX/WEPzjrWrcJiQgjw==", + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.8.tgz", + "integrity": "sha512-tKd+jsmhq21AP1LhexC0pPwsCxEhGgAkg28byjJAd+xhmIs8LUX8JbUc3vBf3PhLxWiB5EvyBE5X7JSPAqMAqg==", "license": "MIT", "engines": { "node": ">=18" @@ -3600,9 +3600,9 @@ } }, "node_modules/@madie/madie-design-system": { - "version": "1.2.39", - "resolved": "https://registry.npmjs.org/@madie/madie-design-system/-/madie-design-system-1.2.39.tgz", - "integrity": "sha512-3ywRn6h571yNgnskL3jhJB5WFfFLmWI3pdleiHSo7LT+aV6FHkmOJhLeaQFt07BG74vT2bG6MHyCmvJFpzhB/Q==", + "version": "1.2.41", + "resolved": "https://registry.npmjs.org/@madie/madie-design-system/-/madie-design-system-1.2.41.tgz", + "integrity": "sha512-jJcKt2bIG9rrXgl6s0UVzAAaFxQXhK2egmfHKdfa/w4jaWfGm1T0gtLoN4nX95fmg3eyjYdubxgKNM6aEKfKbg==", "license": "CC0-1.0", "dependencies": { "@cmsgov/design-system": "^5.0.2", @@ -3622,6 +3622,7 @@ "d3-shape": "^1.3.7", "dayjs": "^1.11.7", "jwt-decode": "^3.1.2", + "lodash": "^4.17.21", "preact": "^10.6.4", "prop-types": "^15.8.1", "react-draggable": "^4.4.6", @@ -3636,9 +3637,9 @@ } }, "node_modules/@madie/madie-design-system/node_modules/@mui/core-downloads-tracker": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.3.tgz", - "integrity": "sha512-ajMUgdfhTb++rwqj134Cq9f4SRN8oXUqMRnY72YBnXiXai3olJLLqETheRlq3MM8wCKrbq7g6j7iWL1VvP44VQ==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.2.1.tgz", + "integrity": "sha512-U/8vS1+1XiHBnnRRESSG1gvr6JDHdPjrpnW6KEebkAQWBn6wrpbSF/XSZ8/vJIRXH5NyDmMHi4Ro5Q70//JKhA==", "license": "MIT", "funding": { "type": "opencollective", @@ -3646,12 +3647,12 @@ } }, "node_modules/@madie/madie-design-system/node_modules/@mui/icons-material": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.3.tgz", - "integrity": "sha512-QBQCCIMSAv6IkArTg4Hg8q2sJRhHOci8oPAlkHWFlt2ghBdy3EqyLbIELLE/bhpqhX+E/ZkPYGIUQCd5/L0owA==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.2.1.tgz", + "integrity": "sha512-bP0XtW+t5KFL+wjfQp2UctN/8CuWqF1qaxbYuCAsJhL+AzproM8gGOh2n8sNBcrjbVckzDNqaXqxdpn+OmoWug==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6" + "@babel/runtime": "^7.26.0" }, "engines": { "node": ">=14.0.0" @@ -3661,7 +3662,7 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@mui/material": "^6.1.3", + "@mui/material": "^6.2.1", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -3672,22 +3673,22 @@ } }, "node_modules/@madie/madie-design-system/node_modules/@mui/material": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.3.tgz", - "integrity": "sha512-loV5MBoMKLrK80JeWINmQ1A4eWoLv51O2dBPLJ260IAhupkB3Wol8lEQTEvvR2vO3o6xRHuXe1WaQEP6N3riqg==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.2.1.tgz", + "integrity": "sha512-7VlKGsRKsy1bOSOPaSNgpkzaL+0C7iWAVKd2KYyAvhR9fTLJtiAMpq+KuzgEh1so2mtvQERN0tZVIceWMiIesw==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6", - "@mui/core-downloads-tracker": "^6.1.3", - "@mui/system": "^6.1.3", - "@mui/types": "^7.2.18", - "@mui/utils": "^6.1.3", + "@babel/runtime": "^7.26.0", + "@mui/core-downloads-tracker": "^6.2.1", + "@mui/system": "^6.2.1", + "@mui/types": "^7.2.20", + "@mui/utils": "^6.2.1", "@popperjs/core": "^2.11.8", - "@types/react-transition-group": "^4.4.11", + "@types/react-transition-group": "^4.4.12", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1", - "react-is": "^18.3.1", + "react-is": "^19.0.0", "react-transition-group": "^4.4.5" }, "engines": { @@ -3700,7 +3701,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^6.1.3", + "@mui/material-pigment-css": "^6.2.1", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -3721,13 +3722,13 @@ } }, "node_modules/@madie/madie-design-system/node_modules/@mui/private-theming": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.3.tgz", - "integrity": "sha512-XK5OYCM0x7gxWb/WBEySstBmn+dE3YKX7U7jeBRLm6vHU5fGUd7GiJWRirpivHjOK9mRH6E1MPIVd+ze5vguKQ==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.2.1.tgz", + "integrity": "sha512-u1y0gpcfrRRxCcIdVeU5eIvkinA82Q8ft178WUNYuoFQrsOrXdlBdZlRVi+eYuUFp1iXI55Cud7sMZZtETix5Q==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6", - "@mui/utils": "^6.1.3", + "@babel/runtime": "^7.26.0", + "@mui/utils": "^6.2.1", "prop-types": "^15.8.1" }, "engines": { @@ -3748,16 +3749,16 @@ } }, "node_modules/@madie/madie-design-system/node_modules/@mui/styles": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-6.1.3.tgz", - "integrity": "sha512-0oE3gbG+5Tt+5odSTIrkLEEw0t0Fljnj0KYcwgHWQkYr3yCjsIJ8kkNEJDlxry46a5VNS7phEWNLBnZeREqzMg==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-6.2.1.tgz", + "integrity": "sha512-24KFfvsWATzgz5NmWs8oQkE+1WjeImz3S7EKo5IHGfn0ghntD5c63eb9fN2h+p5m3X40XaLh7ZwP6FVJdIT51Q==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6", + "@babel/runtime": "^7.26.0", "@emotion/hash": "^0.9.2", - "@mui/private-theming": "^6.1.3", - "@mui/types": "^7.2.18", - "@mui/utils": "^6.1.3", + "@mui/private-theming": "^6.2.1", + "@mui/types": "^7.2.20", + "@mui/utils": "^6.2.1", "clsx": "^2.1.1", "csstype": "^3.1.3", "hoist-non-react-statics": "^3.3.2", @@ -3789,17 +3790,17 @@ } }, "node_modules/@madie/madie-design-system/node_modules/@mui/utils": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.3.tgz", - "integrity": "sha512-4JBpLkjprlKjN10DGb1aiy/ii9TKbQ601uSHtAmYFAS879QZgAD7vRnv/YBE4iBbc7NXzFgbQMCOFrupXWekIA==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.2.1.tgz", + "integrity": "sha512-ubLqGIMhKUH2TF/Um+wRzYXgAooQw35th+DPemGrTpgrZHpOgcnUDIDbwsk1e8iQiuJ3mV/ErTtcQrecmlj5cg==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6", - "@mui/types": "^7.2.18", - "@types/prop-types": "^15.7.13", + "@babel/runtime": "^7.26.0", + "@mui/types": "^7.2.20", + "@types/prop-types": "^15.7.14", "clsx": "^2.1.1", "prop-types": "^15.8.1", - "react-is": "^18.3.1" + "react-is": "^19.0.0" }, "engines": { "node": ">=14.0.0" @@ -3827,6 +3828,12 @@ "node": ">=6" } }, + "node_modules/@madie/madie-design-system/node_modules/react-is": { + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz", + "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==", + "license": "MIT" + }, "node_modules/@material-ui/core": { "version": "4.12.4", "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz", @@ -4351,14 +4358,14 @@ } }, "node_modules/@mui/styled-engine": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.3.tgz", - "integrity": "sha512-i4yh9m+eMZE3cNERpDhVr6Wn73Yz6C7MH0eE2zZvw8d7EFkIJlCQNZd1xxGZqarD2DDq2qWHcjIOucWGhxACtA==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.2.1.tgz", + "integrity": "sha512-6R3OgYw6zgCZWFYYMfxDqpGfJA78mUTOIlUDmmJlr60ogVNCrM87X0pqx5TbZ2OwUyxlJxN9qFgRr+J9H6cOBg==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6", - "@emotion/cache": "^11.13.1", - "@emotion/serialize": "^1.3.2", + "@babel/runtime": "^7.26.0", + "@emotion/cache": "^11.13.5", + "@emotion/serialize": "^1.3.3", "@emotion/sheet": "^1.4.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -4435,16 +4442,16 @@ } }, "node_modules/@mui/system": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.3.tgz", - "integrity": "sha512-ILaD9UsLTBLjMcep3OumJMXh1PYr7aqnkHm/L47bH46+YmSL1zWAX6tWG8swEQROzW2GvYluEMp5FreoxOOC6w==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.2.1.tgz", + "integrity": "sha512-0lc8CbBP4WAAF+SmGMFJI9bpIyQvW3zvwIDzLsb26FIB/4Z0pO7qGe8mkAl0RM63Vb37899qxnThhHKgAAdy6w==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6", - "@mui/private-theming": "^6.1.3", - "@mui/styled-engine": "^6.1.3", - "@mui/types": "^7.2.18", - "@mui/utils": "^6.1.3", + "@babel/runtime": "^7.26.0", + "@mui/private-theming": "^6.2.1", + "@mui/styled-engine": "^6.2.1", + "@mui/types": "^7.2.20", + "@mui/utils": "^6.2.1", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -4475,13 +4482,13 @@ } }, "node_modules/@mui/system/node_modules/@mui/private-theming": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.3.tgz", - "integrity": "sha512-XK5OYCM0x7gxWb/WBEySstBmn+dE3YKX7U7jeBRLm6vHU5fGUd7GiJWRirpivHjOK9mRH6E1MPIVd+ze5vguKQ==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.2.1.tgz", + "integrity": "sha512-u1y0gpcfrRRxCcIdVeU5eIvkinA82Q8ft178WUNYuoFQrsOrXdlBdZlRVi+eYuUFp1iXI55Cud7sMZZtETix5Q==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6", - "@mui/utils": "^6.1.3", + "@babel/runtime": "^7.26.0", + "@mui/utils": "^6.2.1", "prop-types": "^15.8.1" }, "engines": { @@ -4502,17 +4509,17 @@ } }, "node_modules/@mui/system/node_modules/@mui/utils": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.3.tgz", - "integrity": "sha512-4JBpLkjprlKjN10DGb1aiy/ii9TKbQ601uSHtAmYFAS879QZgAD7vRnv/YBE4iBbc7NXzFgbQMCOFrupXWekIA==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.2.1.tgz", + "integrity": "sha512-ubLqGIMhKUH2TF/Um+wRzYXgAooQw35th+DPemGrTpgrZHpOgcnUDIDbwsk1e8iQiuJ3mV/ErTtcQrecmlj5cg==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6", - "@mui/types": "^7.2.18", - "@types/prop-types": "^15.7.13", + "@babel/runtime": "^7.26.0", + "@mui/types": "^7.2.20", + "@types/prop-types": "^15.7.14", "clsx": "^2.1.1", "prop-types": "^15.8.1", - "react-is": "^18.3.1" + "react-is": "^19.0.0" }, "engines": { "node": ">=14.0.0" @@ -4540,10 +4547,16 @@ "node": ">=6" } }, + "node_modules/@mui/system/node_modules/react-is": { + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz", + "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==", + "license": "MIT" + }, "node_modules/@mui/types": { - "version": "7.2.18", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.18.tgz", - "integrity": "sha512-uvK9dWeyCJl/3ocVnTOS6nlji/Knj8/tVqVX03UVTpdmTJYu/s4jtDd9Kvv0nRGE0CUSNW1UYAci7PYypjealg==", + "version": "7.2.20", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.20.tgz", + "integrity": "sha512-straFHD7L8v05l/N5vcWk+y7eL9JF0C2mtph/y4BPm3gn2Eh61dDwDB65pa8DLss3WJfDXYC7Kx5yjP0EmXpgw==", "license": "MIT", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -4594,14 +4607,14 @@ } }, "node_modules/@mui/x-date-pickers": { - "version": "7.19.0", - "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.19.0.tgz", - "integrity": "sha512-OIQ+IxgL2Si7DP68sw1ImcHXZtAmklHcyo/oqP4HuJZ2lVnP5sJkoXrksfumL1wjWKJkecONFz3unAqViKXzCQ==", + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.23.3.tgz", + "integrity": "sha512-bjTYX/QzD5ZhVZNNnastMUS3j2Hy4p4IXmJgPJ0vKvQBvUdfEO+ZF42r3PJNNde0FVT1MmTzkmdTlz0JZ6ukdw==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6", - "@mui/utils": "^5.16.6", - "@mui/x-internals": "7.18.0", + "@babel/runtime": "^7.25.7", + "@mui/utils": "^5.16.6 || ^6.0.0", + "@mui/x-internals": "7.23.0", "@types/react-transition-group": "^4.4.11", "clsx": "^2.1.1", "prop-types": "^15.8.1", @@ -4624,10 +4637,10 @@ "dayjs": "^1.10.7", "luxon": "^3.0.2", "moment": "^2.29.4", - "moment-hijri": "^2.1.2", + "moment-hijri": "^2.1.2 || ^3.0.0", "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -4669,13 +4682,13 @@ } }, "node_modules/@mui/x-internals": { - "version": "7.18.0", - "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.18.0.tgz", - "integrity": "sha512-lzCHOWIR0cAIY1bGrWSprYerahbnH5C31ql/2OWCEjcngL2NAV1M6oKI2Vp4HheqzJ822c60UyWyapvyjSzY/A==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.23.0.tgz", + "integrity": "sha512-bPclKpqUiJYIHqmTxSzMVZi6MH51cQsn5U+8jskaTlo3J4QiMeCYJn/gn7YbeR9GOZFp8hetyHjoQoVHKRXCig==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.6", - "@mui/utils": "^5.16.6" + "@babel/runtime": "^7.25.7", + "@mui/utils": "^5.16.6 || ^6.0.0" }, "engines": { "node": ">=14.0.0" @@ -4685,7 +4698,7 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "react": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { @@ -5547,9 +5560,9 @@ "license": "MIT" }, "node_modules/@types/prop-types": { - "version": "15.7.13", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", - "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==", + "version": "15.7.14", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", + "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", "license": "MIT" }, "node_modules/@types/qs": { @@ -5587,11 +5600,11 @@ } }, "node_modules/@types/react-transition-group": { - "version": "4.4.11", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", - "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==", + "version": "4.4.12", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz", + "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==", "license": "MIT", - "dependencies": { + "peerDependencies": { "@types/react": "*" } }, @@ -7854,9 +7867,9 @@ "license": "MIT" }, "node_modules/core-js": { - "version": "3.38.1", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz", - "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==", + "version": "3.39.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz", + "integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==", "hasInstallScript": true, "license": "MIT", "funding": { @@ -10257,21 +10270,21 @@ "license": "ISC" }, "node_modules/focus-trap": { - "version": "7.6.0", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.0.tgz", - "integrity": "sha512-1td0l3pMkWJLFipobUcGaf+5DTY4PLDDrcqoSaKP8ediO/CoWCCYk/fT/Y2A4e6TNB+Sh6clRJCjOPPnKoNHnQ==", + "version": "7.6.2", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.2.tgz", + "integrity": "sha512-9FhUxK1hVju2+AiQIDJ5Dd//9R2n2RAfJ0qfhF4IHGHgcoEUTMpbTeG/zbEuwaiYXfuAH6XE0/aCyxDdRM+W5w==", "license": "MIT", "dependencies": { "tabbable": "^6.2.0" } }, "node_modules/focus-trap-react": { - "version": "10.3.0", - "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-10.3.0.tgz", - "integrity": "sha512-XrCTj44uNE0clTA47y1AbIb7tM7w6+zi6WrJzb4RxRe3uAIIivkBCwlsCqe7R3vPRT/LCQzfe4+N/KjtJMQMgw==", + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-10.3.1.tgz", + "integrity": "sha512-PN4Ya9xf9nyj/Nd9VxBNMuD7IrlRbmaG6POAQ8VLqgtc6IY/Ln1tYakow+UIq4fihYYYFM70/2oyidE6bbiPgw==", "license": "MIT", "dependencies": { - "focus-trap": "^7.6.0", + "focus-trap": "^7.6.1", "tabbable": "^6.2.0" }, "peerDependencies": { @@ -14909,9 +14922,9 @@ } }, "node_modules/log-symbols/node_modules/chalk": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", - "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.0.tgz", + "integrity": "sha512-ZkD35Mx92acjB2yNJgziGqT9oKHEOxjTBTDRpOsRWtdecL/0jM3z5kM/CTzHWvHIen1GvkM85p6TuFfDGfc8/Q==", "license": "MIT", "engines": { "node": "^12.17.0 || ^14.13 || >=16.0.0" @@ -15691,9 +15704,9 @@ } }, "node_modules/ora/node_modules/chalk": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", - "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.0.tgz", + "integrity": "sha512-ZkD35Mx92acjB2yNJgziGqT9oKHEOxjTBTDRpOsRWtdecL/0jM3z5kM/CTzHWvHIen1GvkM85p6TuFfDGfc8/Q==", "license": "MIT", "engines": { "node": "^12.17.0 || ^14.13 || >=16.0.0" @@ -16876,9 +16889,9 @@ "license": "MIT" }, "node_modules/preact": { - "version": "10.24.2", - "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.2.tgz", - "integrity": "sha512-1cSoF0aCC8uaARATfrlz4VCBqE8LwZwRfLgkxJOQwAlQt6ayTmi0D9OF7nXid1POI5SZidFuG9CnlXbDfLqY/Q==", + "version": "10.25.3", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.25.3.tgz", + "integrity": "sha512-dzQmIFtM970z+fP9ziQ3yG4e3ULIbwZzJ734vaMVUTaKQ2+Ru1Ou/gjshOYVHCcd1rpAelC6ngjvjDXph98unQ==", "license": "MIT", "funding": { "type": "opencollective", @@ -17390,9 +17403,9 @@ "license": "MIT" }, "node_modules/react-modal": { - "version": "3.16.1", - "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz", - "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==", + "version": "3.16.3", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.3.tgz", + "integrity": "sha512-yCYRJB5YkeQDQlTt17WGAgFJ7jr2QYcWa1SHqZ3PluDmnKJ/7+tVU+E6uKyZ0nODaeEj+xCpK4LcSnKXLMC0Nw==", "license": "MIT", "dependencies": { "exenv": "^1.2.0", @@ -17400,12 +17413,9 @@ "react-lifecycles-compat": "^3.0.0", "warning": "^4.0.3" }, - "engines": { - "node": ">=8" - }, "peerDependencies": { - "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", - "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" + "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19", + "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19" } }, "node_modules/react-transition-group": { diff --git a/package.json b/package.json index 00ce1e8d..207f2213 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ }, "dependencies": { "@madie/cql-antlr-parser": "^1.0.9", - "@madie/madie-design-system": "^1.2.39", + "@madie/madie-design-system": "^1.2.41", "@material-ui/core": "^4.12.4", "@mui/icons-material": "^5.5.1", "@mui/lab": "^5.0.0-alpha.73", diff --git a/src/CqlBuilderPanel/definitionsSection/definitions/Definitions.tsx b/src/CqlBuilderPanel/definitionsSection/definitions/Definitions.tsx index fef7c754..57c26f52 100644 --- a/src/CqlBuilderPanel/definitionsSection/definitions/Definitions.tsx +++ b/src/CqlBuilderPanel/definitionsSection/definitions/Definitions.tsx @@ -12,6 +12,7 @@ import { Pagination, MadieDeleteDialog, MadieDiscardDialog, + TruncateText, } from "@madie/madie-design-system/dist/react"; import Skeleton from "@mui/material/Skeleton"; import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; @@ -20,7 +21,6 @@ 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`; diff --git a/src/common/truncateText/TruncateText.test.tsx b/src/common/truncateText/TruncateText.test.tsx deleted file mode 100644 index a13e8a9f..00000000 --- a/src/common/truncateText/TruncateText.test.tsx +++ /dev/null @@ -1,44 +0,0 @@ -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 deleted file mode 100644 index cb8f6549..00000000 --- a/src/common/truncateText/TruncateText.tsx +++ /dev/null @@ -1,38 +0,0 @@ -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; From 7fb4dd2c57b938e668be1dd9306293c6884d53e4 Mon Sep 17 00:00:00 2001 From: Rohit Kandimalla Date: Fri, 20 Dec 2024 11:16:08 -0500 Subject: [PATCH 3/3] MAT-7887 updated font size to match all other columns in the table --- .../definitionsSection/definitions/Definitions.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/CqlBuilderPanel/definitionsSection/definitions/Definitions.tsx b/src/CqlBuilderPanel/definitionsSection/definitions/Definitions.tsx index 57c26f52..bfbf67fd 100644 --- a/src/CqlBuilderPanel/definitionsSection/definitions/Definitions.tsx +++ b/src/CqlBuilderPanel/definitionsSection/definitions/Definitions.tsx @@ -111,6 +111,7 @@ const Definitions = ({ ); },