Merge pull request #1928: Show warnings in Info component

src/actions/recomputeReduxState.js

@@ -743,6 +743,9 @@ const createMetadataStateFromJSON = (json) => {
   if (json.meta.description) {
     metadata.description = json.meta.description;
   }
+  if (json.meta.warning) {
+    metadata.warning = json.meta.warning;
+  }
   if (json.version) {
     metadata.version = json.version;
   }

src/components/framework/fine-print.js

@@ -161,7 +161,9 @@ export function getCustomFinePrint() {
   return (
     <Suspense fallback={<></>}>
       <Flex className='finePrint'>
-        <MarkdownDisplay mdstring={markdown} />
+        <MarkdownDisplay
+          mdstring={markdown}
+          placeholder="This dataset contained a fine print message to be displayed here, however it wasn't correctly formatted." />
       </Flex>
     </Suspense>
   );

src/components/framework/footer.js

@@ -163,7 +163,10 @@ export const getAcknowledgments = (metadata, dispatch) => {
   if (metadata.description) {
     return (
       <Suspense fallback={<div />}>
-        <MarkdownDisplay className="acknowledgments" mdstring={metadata.description} />
+        <MarkdownDisplay
+          className="acknowledgments"
+          mdstring={metadata.description}
+          placeholder="This dataset contained acknowledgements to be displayed here, however it wasn't correctly formatted." />
       </Suspense>
     );
   }

src/components/info/info.js

@@ -4,6 +4,7 @@ import { withTranslation } from 'react-i18next';
 import Card from "../framework/card";
 import { titleFont, headerFont, medGrey, darkGrey } from "../../globalStyles";
 import Byline from "./byline";
+import Warning from "./warning";
 import {datasetSummary} from "./datasetSummary";
 import FiltersSummary from "./filtersSummary";
 
@@ -48,6 +49,10 @@ class Info extends React.Component {
             <Byline/>
           </div>
 
+          <div width={this.props.width}>
+            <Warning />
+          </div>
+
           <div width={this.props.width} style={styles.n}>
             {animating ? t("Animation in progress") + ". " : null}
             {showExtended &&

src/components/info/warning.js

@@ -0,0 +1,67 @@
+import React, { Suspense, lazy } from "react";
+import { connect } from "react-redux";
+import styled from 'styled-components';
+import { FaExclamationTriangle } from "react-icons/fa";
+import { withTranslation } from 'react-i18next';
+
+const MarkdownDisplay = lazy(() => import("../markdownDisplay"));
+
+const WarningContainer = styled.div`
+  background-color: #FFF1D1;
+  display: flex;
+  align-items: stretch;
+`;
+
+const WarningIconContainer = styled.div`
+  background-color: #FFC641;
+  padding: 0 7px;
+  display: flex;
+  align-items: center;
+`;
+
+const WarningIcon = styled.div`
+  padding-top: 3px;
+  color: white;
+  font-size: 24px;
+`;
+
+const WarningText = styled.div`
+  padding: 0 7px;
+  font-size: 15px;
+`;
+
+/**
+ * React component for the warning of the current dataset.
+ */
+@connect((state) => {
+  return {
+    warning: state.metadata.warning
+  };
+})
+class Warning extends React.Component {
+  render() {
+    const { warning } = this.props;
+
+    if (warning === undefined) return null;
+
+    return (
+      <Suspense fallback={null}>
+        <WarningContainer>
+          <WarningIconContainer>
+            <WarningIcon>
+              <FaExclamationTriangle />
+            </WarningIcon>
+          </WarningIconContainer>
+          <WarningText>
+            <MarkdownDisplay
+              mdstring={warning}
+              placeholder="This dataset contained a warning message to be displayed here, however it wasn't correctly formatted."/>
+          </WarningText>
+        </WarningContainer>
+      </Suspense>
+    );
+  }
+}
+
+const WithTranslation = withTranslation()(Warning);
+export default WithTranslation;

src/components/markdownDisplay/index.js

@@ -1,18 +1,31 @@
 import React from "react";
 import { parseMarkdown } from "../../util/parseMarkdown";
 
-export default function MarkdownDisplay({ mdstring, ...props }) {
-  let cleanDescription;
+export default function MarkdownDisplay({ mdstring, placeholder, ...props }) {
   try {
-    cleanDescription = parseMarkdown(mdstring);
+    return (
+      <div
+        {...props}
+        dangerouslySetInnerHTML={{ __html: parseMarkdown(mdstring) }}
+      />
+    );
   } catch (error) {
-    console.error(`Error parsing Markdown: ${error}`);
-    cleanDescription = '<p>There was an error parsing the Markdown.  See the JS console.</p>';
+    if (typeof mdstring === 'string') {
+      // This runs when there is a bug within parseMarkdown or the marked package.
+      console.error(`There was an error parsing the provided text as Markdown. Using the raw text as-is. Error: ${error}`);
+      return (
+        <div {...props}>
+          <p>{mdstring}</p>
+          <p>Note: This message was meant to be rendered with formatting, however there was an error parsing the message as Markdown.</p>
+        </div>
+      );
+    } else {
+      console.error(`There was an error parsing the provided text as Markdown or raw text. Error: ${error}`);
+      return (
+        <div {...props}>
+          <p>{placeholder}</p>
+        </div>
+      );
+    }
   }
-  return (
-    <div
-      {...props}
-      dangerouslySetInnerHTML={{ __html: cleanDescription }}
-    />
-  );
 }

src/components/narrative/MainDisplayMarkdown.js

@@ -108,7 +108,10 @@ const MainDisplayMarkdown = ({ narrativeBlock, width, mobile }) => {
   return (
     <Container width={width} mobile={mobile}>
       <Suspense>
-        <MarkdownDisplay dir="auto" mdstring={narrativeBlock.mainDisplayMarkdown} />
+        <MarkdownDisplay
+          dir="auto"
+          mdstring={narrativeBlock.mainDisplayMarkdown}
+          placeholder="Narrative content should be displayed here, however it wasn't correctly formatted." />
       </Suspense>
     </Container>
   );

src/util/parseMarkdown.js

@@ -63,7 +63,7 @@ ALLOWED_ATTR.push("z", "zoomAndPan");
 export const parseMarkdown = (mdString) => {
   const sanitizer = dompurify.sanitize;
   const sanitizerConfig = {ALLOWED_TAGS, ALLOWED_ATTR, KEEP_CONTENT: false, ALLOW_DATA_ATTR: false};
-  const rawDescription = marked(mdString);
-  const cleanDescription = sanitizer(rawDescription, sanitizerConfig);
-  return cleanDescription;
+  const rawHtml = marked(mdString);
+  const html = sanitizer(rawHtml, sanitizerConfig);
+  return html;
 };