Merge pull request #674 from SynBioHub/detailsbug

fixed bug with details having html tags, fixed nesting issue and fixe…

frontend/components/Viewing/MetadataInfo.js

@@ -13,7 +13,7 @@ import { isUriOwner, formatMultipleTitles } from './Shell';
 
 const { publicRuntimeConfig } = getConfig();
 
-export default function MetadataInfo({ title, link, label, icon, specific, uri, editable }) {
+export default function MetadataInfo({ title, link, label, icon, specific, uri }) {
   const theme = JSON.parse(localStorage.getItem('theme')) || {};
   const [isHovered, setIsHovered] = useState(false);
 
@@ -263,8 +263,6 @@ export default function MetadataInfo({ title, link, label, icon, specific, uri,
 
 
 
-
-
   // Rendered label with plus icon
   const renderedLabel = (
     <div className={styles.infolabel}>
@@ -311,13 +309,13 @@ export default function MetadataInfo({ title, link, label, icon, specific, uri,
   }
   const renderedTitle = (
     <div className={styles.infotitle}>
-      <table>
-        <tbody>
+      <div>
+        <div>
           {metadata.map((data, index) => {
             let isEditingThisItem = false;
             let currentValue = "";
             let correspondingLink = (label === 'Source' || label === 'Type' || label === 'Role')
-              ? (link && link.length > 0 && typeof link === 'object' ? link[index] : null)
+              ? (link && link.length > 0 && typeof link === 'object' ? link[index] : (link ? link : null))
               : link;
             let processedSource = data;
             if (typeof (data) === 'string' && data.match(urlRegex)) {
@@ -339,10 +337,9 @@ export default function MetadataInfo({ title, link, label, icon, specific, uri,
               default:
                 break;
             }
-
             return (
-              <tr key={index}>
-                <td>
+              <div key={index}>
+                <div>
                   {isEditingThisItem ? (
                     <div>
                       <input
@@ -369,14 +366,14 @@ export default function MetadataInfo({ title, link, label, icon, specific, uri,
                     </div>
                   ) : (
                     <a
-                      href={correspondingLink ? correspondingLink : `http://localhost:3333/${processedSource}`}
+                      href={correspondingLink ? correspondingLink : `/${processedSource}`}
                       target="_blank"
                       rel="noopener noreferrer"
                     >
                       {processedSource}
                     </a>
                   )}
-                </td><td>
+                </div><div>
                   {(label === "Source" || label === "Type" || label === "Role") && data && (
                     isEditingThisItem ? null : (
                       <div>
@@ -393,12 +390,12 @@ export default function MetadataInfo({ title, link, label, icon, specific, uri,
                       </div>
                     )
                   )}
-                </td>
-              </tr>
+                </div>
+              </div>
             );
           })}
-        </tbody>
-      </table>
+        </div>
+      </div>
     </div>
   );
 

frontend/components/Viewing/PageJSON/Rendering/MetadataRenderer.js

@@ -7,12 +7,16 @@ export default function MetadataRenderer({ title, content, editable, uri }) {
   const [sectionIcon, setSectionIcon] = useState(null);
   const contentConsolidated = content.map((row, index) => {
     return (
-      <RowWrapper
-        sections={row}
-        metadata={true}
-        setSectionIcon={setSectionIcon}
-        key={index}
-      />
+      <table key={index}>
+        <tbody>
+          <RowWrapper
+            sections={row}
+            metadata={true}
+            setSectionIcon={setSectionIcon}
+            key={index}
+          />
+        </tbody>
+      </table>
     );
   });
   return (

frontend/components/Viewing/PageJSON/Rendering/RowWrapper.js

@@ -262,6 +262,7 @@ export default function RowWrapper({ sections, metadata, setSectionIcon }) {
           <MiniLoading height={10} width={50} />
         </td>
       </tr>
+
     );
   }
   return <tr>{content}</tr>;

frontend/components/Viewing/Sections/Details/Section.js

@@ -2,7 +2,6 @@ import styles from "../../../../styles/view.module.css";
 import { faPencilAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
-import parse from "html-react-parser";
 
 /**
  * The section for each field in details.
@@ -11,6 +10,8 @@ import parse from "html-react-parser";
  * @returns The name of the section and the content in it.
  */
 export default function Section(properties) {
+  const sanitizedText = removeHtmlTags(properties.text);
+
   return (
     <React.Fragment>
       {properties.owner && (
@@ -26,7 +27,17 @@ export default function Section(properties) {
         />
       )}
       <h4 className={styles.detailsheader}>{properties.title}</h4>
-      <p className={styles.detailstext}>{parse(properties.text)}</p>
+      <p className={styles.detailstext}>{sanitizedText}</p>
     </React.Fragment>
   );
 }
+
+/**
+ * Function to remove HTML tags from a string.
+ *
+ * @param {string} text The input text with potential HTML tags.
+ * @returns {string} The text with HTML tags removed.
+ */
+function removeHtmlTags(text) {
+  return text.replace(/<\/?[^>]+(>|$)/g, "");
+}

frontend/public/commitHash.txt

@@ -1 +1 @@
-438f4afa7b08703b5a5cddd52db3eecd50330620
+530ea786424d2c7c88e0302a2930132f29c79883