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/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..46bc8b063 --- /dev/null +++ b/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 ( + + + + + + + + + + + + + ); + } +} + +const WithTranslation = withTranslation()(Warning); +export default WithTranslation;