From c595839fda90c40f5fe9a4dbc1dd6d90435739a6 Mon Sep 17 00:00:00 2001
From: David Quartey <42542676+DavidQuartz@users.noreply.github.com>
Date: Wed, 20 Apr 2022 15:15:51 +0000
Subject: [PATCH] [Fixes #919] Truncate abstract inside the metadata table
 inside the info box (#949)

---
 .../js/components/DetailsPanel/DetailsPanel.jsx       | 11 ++++++++++-
 .../client/themes/geonode/less/_details-panel.less    |  5 +++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
index 0c98b9b151..308adcd8af 100644
--- a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
+++ b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
@@ -210,6 +210,8 @@ function DetailsPanel({
     const detailsContainerNode = useRef();
     const isMounted = useRef();
     const [copiedResourceLink, setCopiedResourceLink] = useState(false);
+    const [readMore, setReadMore] = useState(false);
+
     useEffect(() => {
         isMounted.current = true;
         return () => {
@@ -269,6 +271,13 @@ function DetailsPanel({
         return dataType;
     };
 
+    // To be used when user clicks 'Read more' for long abstracts
+    const extraContent = readMore && (<span className="extra-content">
+        {validateDataType(resource?.raw_abstract)?.substring(100, resource?.raw_abstract?.length - 1)}
+    </span>);
+
+    const linkName = readMore ? 'Read Less' : 'Read More';
+
     const infoField = [
         {
             "label": "Title",
@@ -276,7 +285,7 @@ function DetailsPanel({
         },
         {
             "label": "Abstract",
-            "value": validateDataType(resource?.raw_abstract)
+            "value": validateDataType(resource?.raw_abstract)?.length > 100 ? <div>{validateDataType(resource?.raw_abstract)?.substring(0, 100)}{extraContent}{' '}<a className="read-more-link" onClick={() => setReadMore(!readMore) }>{linkName}</a></div> : validateDataType(resource?.raw_abstract)
         },
         {
             "label": "Owner",
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
index f266acd840..71da7bad3f 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
@@ -456,4 +456,9 @@
     .gn-overlay-wrapper {
         width: 100vw;
     }
+}
+
+.read-more-link {
+    text-decoration: underline;
+    cursor: pointer;
 }
\ No newline at end of file