diff --git a/src/actions/recomputeReduxState.js b/src/actions/recomputeReduxState.js index 0345f4293..09d734dbe 100644 --- a/src/actions/recomputeReduxState.js +++ b/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; } diff --git a/src/components/framework/fine-print.js b/src/components/framework/fine-print.js index 368639946..5943a1eec 100644 --- a/src/components/framework/fine-print.js +++ b/src/components/framework/fine-print.js @@ -161,7 +161,9 @@ export function getCustomFinePrint() { return ( }> - + ); diff --git a/src/components/framework/footer.js b/src/components/framework/footer.js index 32e6018c4..0f88784e6 100644 --- a/src/components/framework/footer.js +++ b/src/components/framework/footer.js @@ -163,7 +163,10 @@ export const getAcknowledgments = (metadata, dispatch) => { if (metadata.description) { return ( }> - + ); } diff --git a/src/components/info/info.js b/src/components/info/info.js index 7734df881..43b3415ae 100644 --- a/src/components/info/info.js +++ b/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 { +
+ +
+
{animating ? t("Animation in progress") + ". " : null} {showExtended && diff --git a/src/components/info/warning.js b/src/components/info/warning.js new file mode 100644 index 000000000..09a724f94 --- /dev/null +++ b/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 ( + + + + + + + + + + + + + ); + } +} + +const WithTranslation = withTranslation()(Warning); +export default WithTranslation; diff --git a/src/components/markdownDisplay/index.js b/src/components/markdownDisplay/index.js index 26b7a95ff..b243c0339 100644 --- a/src/components/markdownDisplay/index.js +++ b/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 ( +
+ ); } catch (error) { - console.error(`Error parsing Markdown: ${error}`); - cleanDescription = '

There was an error parsing the Markdown. See the JS console.

'; + 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 ( +
+

{mdstring}

+

Note: This message was meant to be rendered with formatting, however there was an error parsing the message as Markdown.

+
+ ); + } else { + console.error(`There was an error parsing the provided text as Markdown or raw text. Error: ${error}`); + return ( +
+

{placeholder}

+
+ ); + } } - return ( -
- ); } diff --git a/src/components/narrative/MainDisplayMarkdown.js b/src/components/narrative/MainDisplayMarkdown.js index cc8870021..924b51b59 100644 --- a/src/components/narrative/MainDisplayMarkdown.js +++ b/src/components/narrative/MainDisplayMarkdown.js @@ -108,7 +108,10 @@ const MainDisplayMarkdown = ({ narrativeBlock, width, mobile }) => { return ( - + ); diff --git a/src/util/parseMarkdown.js b/src/util/parseMarkdown.js index 37f0821b6..131248e07 100644 --- a/src/util/parseMarkdown.js +++ b/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; };