[Fixes #919] Truncate abstract inside the metadata table inside the i…

…nfo box (#949)

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,14 +271,21 @@ 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",
             "value": validateDataType(resource?.title)
         },
         {
             "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",

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;
 }