Show warnings in Info component

Inspired by code in byline.js (same parent component) and footer.js
(also parses Markdown)

Markdown loads lazily, but I think it will be useful to support Markdown
format instead of just plain text (which could be loaded earlier).

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/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,65 @@
+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-left: 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} />
+          </WarningText>
+        </WarningContainer>
+      </Suspense>
+    );
+  }
+}
+
+const WithTranslation = withTranslation()(Warning);
+export default WithTranslation;