SONAR-9936 Make the edition notifications global again

2 files changed, 24 insertions, 1 deletions

diff --git a/server/sonar-web/src/main/js/components/nav/NavBar.css b/server/sonar-web/src/main/js/components/nav/NavBar.css
index fb9393dd02e..0a24b4232ad 100644
--- a/server/sonar-web/src/main/js/components/nav/NavBar.css
+++ b/server/sonar-web/src/main/js/components/nav/NavBar.css
@@ -28,3 +28,8 @@
   border-right: none;
   padding: 6px 0;
 }
+
+.navbar-notif-cancelable {
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx b/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx
index 9004c1b7fe9..c276e20f62f 100644
--- a/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx
+++ b/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx
@@ -19,20 +19,38 @@
  */
 import * as React from 'react';
 import * as classNames from 'classnames';
+import CloseIcon from '../icons-components/CloseIcon';
 
 interface Props {
   children?: React.ReactNode;
   className?: string;
+  onCancel?: () => {};
 }
 
 export default class NavBarNotif extends React.PureComponent<Props> {
+  handleCancel = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    if (this.props.onCancel) {
+      this.props.onCancel();
+    }
+  };
+
   render() {
     if (!this.props.children) {
       return null;
     }
     return (
       <div className={classNames('navbar-notif', this.props.className)}>
-        <div className="navbar-limited clearfix">{this.props.children}</div>
+        <div className="navbar-limited clearfix">
+          <div className={classNames({ 'navbar-notif-cancelable': !!this.props.onCancel })}>
+            {this.props.children}
+            {this.props.onCancel && (
+              <a className="button-link text-danger" href="#" onClick={this.handleCancel}>
+                <CloseIcon />
+              </a>
+            )}
+          </div>
+        </div>
       </div>
     );
   }