Data drawer final round of prod QA fixes (#1955)

* add long title

* add organism to Dataset Metadata and create headers

* begin HTMLTable for metadata

* switch out truncating for scrolling

* add optional chaining to redux state mapping

Co-authored-by: maniarathi <mani.arathi@gmail.com>

client/src/components/infoDrawer/infoFormat.js

@@ -1,8 +1,6 @@
-import { H3, H1, UL } from "@blueprintjs/core";
+import { H3, H1, UL, HTMLTable, Classes } from "@blueprintjs/core";
 import React from "react";
 
-import Truncate from "../util/truncate";
-
 const renderContributors = (contributors, affiliations) => {
   // eslint-disable-next-line no-constant-condition --  Temp removed contributor section to avoid publishing PII
   if (!contributors || contributors.length === 0 || true) return null;
@@ -71,26 +69,35 @@ const renderDOILink = (type, doi) => {
   );
 };
 
-const renderOrganism = (organism) => {
-  if (!organism) return null;
-  return (
-    <>
-      <H3>Organism</H3>
-      <p>{organism}</p>
-    </>
-  );
-};
-
 const ONTOLOGY_KEY = "ontology_term_id";
-const CAT_WIDTH = "30%";
-const VAL_WIDTH = "35%";
 // Render list of metadata attributes found in categorical field
-const renderSingleValueCategories = (singleValueCategories) => {
+const renderDatasetMetadata = (singleValueCategories, corporaMetadata) => {
   if (singleValueCategories.size === 0) return null;
   return (
     <>
       <H3>Dataset Metadata</H3>
-      <UL>
+      <HTMLTable
+        striped
+        condensed
+        style={{ display: "block", width: "100%", overflowX: "auto" }}
+      >
+        <thead>
+          <tr>
+            <th>Field</th>
+            <th>Label</th>
+            <th>Ontology ID</th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.entries(corporaMetadata).map(([key, value]) => {
+            return (
+              <tr {...{ key }}>
+                <td>{`${key}:`}</td>
+                <td>{value}</td>
+                <td />
+              </tr>
+            );
+          })}
           {Array.from(singleValueCategories).reduce((elems, pair) => {
             const [category, value] = pair;
             // If the value is empty skip it
@@ -99,35 +106,26 @@ const renderSingleValueCategories = (singleValueCategories) => {
             // If this category is a ontology term, let's add its value to the previous node
             if (String(category).includes(ONTOLOGY_KEY)) {
               const prevElem = elems.pop();
+              const newChildren = [...prevElem.props.children];
+              newChildren.splice(2, 1, [<td key="ontology">{value}</td>]);
               // Props aren't extensible so we must clone and alter the component to append the new child
               elems.push(
-              React.cloneElement(
+                React.cloneElement(prevElem, prevElem.props, newChildren)
-                prevElem,
-                prevElem.props,
-                // Concat returns a new array
-                prevElem.props.children.concat([
-                  <Truncate key="ontology">
-                    <span style={{ width: VAL_WIDTH }}>{value}</span>
-                  </Truncate>,
-                ])
-              )
               );
             } else {
               // Create the list item
               elems.push(
-              <li key={category} style={{ width: "100%" }}>
+                <tr key={category}>
-                <Truncate>
+                  <td>{`${category}:`}</td>
-                  <span style={{ width: CAT_WIDTH }}>{`${category}:`}</span>
+                  <td>{value}</td>
-                </Truncate>
+                  <td />
-                <Truncate>
+                </tr>
-                  <span style={{ width: VAL_WIDTH }}>{value}</span>
-                </Truncate>
-              </li>
               );
             }
             return elems;
           }, [])}
-      </UL>
+        </tbody>
+      </HTMLTable>
     </>
   );
 };
@@ -184,14 +182,15 @@ const InfoFormat = React.memo(
     const affiliations = buildAffiliations(contributors);
 
     return (
-      <div style={{ margin: 24, overflow: "auto" }}>
+      <div className={Classes.DIALOG_BODY}>
+        <div className={Classes.DIALOG_BODY}>
           <H1>{title ?? datasetTitle}</H1>
           {renderContributors(contributors, affiliations)}
+          {renderDatasetMetadata(singleValueCategories, { organism })}
+          {renderLinks(projectLinks, aboutURL)}
           {renderDOILink("DOI", doi)}
           {renderDOILink("Preprint DOI", preprintDOI)}
-        {renderOrganism(organism)}
+        </div>
-        {renderSingleValueCategories(singleValueCategories)}
-        {renderLinks(projectLinks, aboutURL)}
       </div>
     );
   }

client/src/components/leftSidebar/topLeftLogoAndTitle.js

@@ -1,4 +1,3 @@
-// jshint esversion: 6
 import React from "react";
 import { connect } from "react-redux";
 import { Button } from "@blueprintjs/core";
@@ -11,13 +10,19 @@ import InformationMenu from "./infoMenu";
 
 const DATASET_TITLE_FONT_SIZE = 14;
 
-@connect((state) => ({
+@connect((state) => {
+  const { corpora_props: corporaProps } = state.config;
+  const correctVersion =
+    corporaProps?.version?.["corpora_schema_version"] !== "1.0.0";
+  return {
     datasetTitle: state.config?.displayNames?.dataset ?? "",
     libraryVersions: state.config?.["library_versions"],
     aboutLink: state.config?.links?.["about-dataset"],
     tosURL: state.config?.parameters?.["about_legal_tos"],
     privacyURL: state.config?.parameters?.["about_legal_privacy"],
-}))
+    title: correctVersion ? corporaProps?.title : undefined,
+  };
+})
 class LeftSideBar extends React.Component {
   handleClick = () => {
     const { dispatch } = this.props;
@@ -32,6 +37,7 @@ class LeftSideBar extends React.Component {
       privacyURL,
       tosURL,
       dispatch,
+      title,
     } = this.props;
 
     return (
@@ -86,7 +92,7 @@ class LeftSideBar extends React.Component {
           >
             <Truncate>
               <span style={{ maxWidth: 155 }} data-testid="header">
-                {datasetTitle}
+                {title ?? datasetTitle}
               </span>
             </Truncate>
           </Button>