ui: allow markup in announcement

Closes #304
reanahub · Dec 8, 2022 · 83fbbbe · 83fbbbe
1 parent 2cd5fde
commit 83fbbbe
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 2 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -21,6 +21,7 @@ Version 0.9.0 (UNRELEASED)
 - Changes the workflow-details page to show the workspace's retention rules.
 - Changes the workflow-details page to show the duration of the workflow's jobs.
 - Changes the deletion of a workflow to always clean up the workspace.
+- Changes the announcements to support limited HTML markup.
 
 Version 0.8.2 (2022-02-15)
 ---------------------------

diff --git a/reana-ui/package.json b/reana-ui/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.24.0",
+    "dompurify": "^2.4.1",
     "lodash": "^4.17.15",
     "mime": "^2.4.4",
     "moment": "^2.24.0",

diff --git a/reana-ui/src/components/Announcement.js b/reana-ui/src/components/Announcement.js
@@ -2,16 +2,18 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020 CERN.
+  Copyright (C) 2020, 2022 CERN.
 
   REANA is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
 */
 
+import DOMPurify from "dompurify";
 import { useState } from "react";
 import { Icon } from "semantic-ui-react";
 import { useSelector } from "react-redux";
 
+import { ALLOWED_HTML_TAGS_ANNOUNCEMENT } from "~/config";
 import { getConfig } from "~/selectors";
 
 import styles from "./Announcement.module.scss";
@@ -33,7 +35,13 @@ export default function Announcement() {
       <div className={styles.bar} hidden={hidden}>
         <span className={styles.message}>
           <Icon name="warning circle" />
-          {config.announcement}
+          <span
+            dangerouslySetInnerHTML={{
+              __html: DOMPurify.sanitize(config.announcement, {
+                ALLOWED_TAGS: ALLOWED_HTML_TAGS_ANNOUNCEMENT,
+              }),
+            }}
+          />
         </span>
         <Icon
           link

diff --git a/reana-ui/src/config.js b/reana-ui/src/config.js
@@ -62,3 +62,8 @@ export const NON_FINISHED_STATUSES = [
 export const NON_DELETED_STATUSES = WORKFLOW_STATUSES.filter(
   (status) => status !== "deleted"
 );
+
+/**
+ * List of HTML tags that can be present in an announcement.
+ */
+export const ALLOWED_HTML_TAGS_ANNOUNCEMENT = ["a", "b", "em", "i", "strong"];
diff --git a/reana-ui/yarn.lock b/reana-ui/yarn.lock
@@ -4125,6 +4125,11 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
+dompurify@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.1.tgz#f9cb1a275fde9af6f2d0a2644ef648dd6847b631"
+  integrity sha512-ewwFzHzrrneRjxzmK6oVz/rZn9VWspGFRDb4/rRtIsM1n36t9AKma/ye8syCpcw+XJ25kOK/hOG7t1j2I2yBqA==
+
 domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"