This is an automated email from the ASF dual-hosted git repository.
ppawar pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/master by this push:
new c7da69029 ATLAS-5052: [React UI] Show More and Show Less button
appears on new line instead of inline in description section on detail page
(#371)
c7da69029 is described below
commit c7da6902978bf2aedaa38841dc997d5671a0c292
Author: Brijesh Bhalala <[email protected]>
AuthorDate: Mon Sep 8 17:35:02 2025 +0530
ATLAS-5052: [React UI] Show More and Show Less button appears on new line
instead of inline in description section on detail page (#371)
---
dashboard/src/components/ShowMore/ShowMoreText.tsx | 75 +++++++---------------
dashboard/src/styles/detailPage.scss | 11 ++++
.../src/views/DetailPage/DetailPageAttributes.tsx | 22 +++----
3 files changed, 43 insertions(+), 65 deletions(-)
diff --git a/dashboard/src/components/ShowMore/ShowMoreText.tsx
b/dashboard/src/components/ShowMore/ShowMoreText.tsx
index a0cdd3db2..8a18660a7 100644
--- a/dashboard/src/components/ShowMore/ShowMoreText.tsx
+++ b/dashboard/src/components/ShowMore/ShowMoreText.tsx
@@ -33,66 +33,35 @@ const ShowMoreText = ({
less: string;
isHtml?: boolean;
}) => {
- const [showMore, setShowMore] = useState<boolean>(
- value.length > maxLength ? true : false
- );
+ const [isTruncated, setIsTruncated] = useState(true);
if (isEmpty(value)) return <>NA</>;
- const truncatedValue = value.substring(0, maxLength);
+ const shouldTruncate = value.length > maxLength && isTruncated;
+ const displayValue = shouldTruncate
+ ? value.substring(0, maxLength) + "..."
+ : value;
return (
<>
- {showMore && value.length > maxLength ? (
- <>
- {isHtml ? (
- <div
- className="long-descriptions"
- dangerouslySetInnerHTML={{ __html: truncatedValue }}
- />
- ) : (
- <>{truncatedValue}</>
- )}
- ...{" "}
- <MuiLink
- underline="hover"
- style={{ cursor: "pointer" }}
- onClick={(event) => {
- event.preventDefault();
- setShowMore(false);
- }}
- sx={{ display: "inline-block" }}
- >
- <Typography fontSize="14px" fontWeight={500}>
- {more}
- </Typography>
- </MuiLink>
- </>
+ {isHtml ? (
+ <div
+ className="long-descriptions"
+ dangerouslySetInnerHTML={{ __html: displayValue }}
+ />
) : (
- <>
- {isHtml ? (
- <div
- className="long-descriptions"
- dangerouslySetInnerHTML={{ __html: value }}
- />
- ) : (
- <>{value}</>
- )}
- {value.length > maxLength && (
- <MuiLink
- underline="hover"
- style={{ cursor: "pointer" }}
- onClick={() => {
- setShowMore(true);
- }}
- sx={{ display: "inline-block" }}
- >
- <Typography fontSize="14px" fontWeight={500}>
- {less}
- </Typography>
- </MuiLink>
- )}
- </>
+ displayValue
+ )}
+ {value.length > maxLength && (
+ <MuiLink
+ underline="hover"
+ onClick={() => setIsTruncated((prev) => !prev)}
+ className="show-more-less-link"
+ >
+ <Typography fontSize="14px" fontWeight={500}>
+ {shouldTruncate ? ` ${more}` : ` ${less}`}
+ </Typography>
+ </MuiLink>
)}
</>
);
diff --git a/dashboard/src/styles/detailPage.scss
b/dashboard/src/styles/detailPage.scss
index eaa36e2e1..2583c0cb7 100644
--- a/dashboard/src/styles/detailPage.scss
+++ b/dashboard/src/styles/detailPage.scss
@@ -150,3 +150,14 @@ pre.code-block .json-string {
.detail-page-divider:nth-child(even) {
display: none;
}
+
+.long-descriptions,
+.long-descriptions * {
+ display: contents;
+}
+
+.show-more-less-link {
+ display: inline-block !important;
+ cursor: pointer !important;
+ margin-left: 6px !important;
+}
diff --git a/dashboard/src/views/DetailPage/DetailPageAttributes.tsx
b/dashboard/src/views/DetailPage/DetailPageAttributes.tsx
index c04e57947..4fbe50e7c 100644
--- a/dashboard/src/views/DetailPage/DetailPageAttributes.tsx
+++ b/dashboard/src/views/DetailPage/DetailPageAttributes.tsx
@@ -170,7 +170,7 @@ const DetailPageAttribute = ({
{" "}
{shortDescription != undefined && (
<>
- <Stack gap="0.5rem">
+ <Stack gap="0.5rem" direction="row">
<Typography
flexBasis="12%"
fontWeight="600"
@@ -247,17 +247,15 @@ const DetailPageAttribute = ({
paddingRight: "1rem"
}}
>
- <Stack gap={1} right="0" top="0" justifyContent="flex-end">
+ <div>
{alignment == "formatted" ? (
- <div style={{ wordBreak: "break-all" }}>
- <ShowMoreText
- value={sanitizeHtmlContent(description)}
- maxLength={160}
- more={"show more"}
- less={"show less"}
- isHtml={true}
- />
- </div>
+ <ShowMoreText
+ value={sanitizeHtmlContent(description)}
+ maxLength={160}
+ more={"show more"}
+ less={"show less"}
+ isHtml={true}
+ />
) : (
<div style={{ wordBreak: "break-all" }}>
<ShowMoreText
@@ -268,7 +266,7 @@ const DetailPageAttribute = ({
/>
</div>
)}
- </Stack>
+ </div>
</div>
</Stack>
{!isEmpty(gtypeParams) &&
