From: Stas Vilchik <stas.vilchik@sonarsource.com>
Date: Mon, 17 Dec 2018 09:45:21 +0000 (+0100)
Subject: SONAR-11204 use alerts in place of banners
X-Git-Tag: 7.6~237
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=099c6eb3c9fadb7ba9b4914bf142387424fc33ce;p=sonarqube.git

SONAR-11204 use alerts in place of banners
---

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx
index 6a0828e4fa1..e86caecbf86 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx
@@ -21,11 +21,10 @@ import * as React from 'react';
 import { Link } from 'react-router';
 import { FormattedMessage } from 'react-intl';
 import ComponentNavLicenseNotif from './ComponentNavLicenseNotif';
-import NavBarNotif from '../../../../components/nav/NavBarNotif';
-import PendingIcon from '../../../../components/icons-components/PendingIcon';
 import { STATUSES } from '../../../../apps/background-tasks/constants';
 import { getComponentBackgroundTaskUrl } from '../../../../helpers/urls';
 import { hasMessage, translate } from '../../../../helpers/l10n';
+import { Alert } from '../../../../components/ui/Alert';
 
 interface Props {
   component: T.Component;
@@ -64,17 +63,15 @@ export default class ComponentNavBgTaskNotif extends React.PureComponent<Props>
     const { currentTask, currentTaskOnSameBranch, isInProgress, isPending } = this.props;
     if (isInProgress) {
       return (
-        <NavBarNotif variant="info">
-          <i className="spinner spacer-right text-bottom" />
+        <Alert display="banner" variant="info">
           {this.renderMessage('component_navigation.status.in_progress')}
-        </NavBarNotif>
+        </Alert>
       );
     } else if (isPending) {
       return (
-        <NavBarNotif variant="info">
-          <PendingIcon className="spacer-right" />
+        <Alert display="banner" variant="info">
           {this.renderMessage('component_navigation.status.pending', STATUSES.ALL)}
-        </NavBarNotif>
+        </Alert>
       );
     } else if (currentTask && currentTask.status === STATUSES.FAILED) {
       if (
@@ -99,7 +96,11 @@ export default class ComponentNavBgTaskNotif extends React.PureComponent<Props>
         message = this.renderMessage('component_navigation.status.failed');
       }
 
-      return <NavBarNotif variant="error">{message}</NavBarNotif>;
+      return (
+        <Alert display="banner" variant="error">
+          {message}
+        </Alert>
+      );
     }
     return null;
   }
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavLicenseNotif.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavLicenseNotif.tsx
index bcc3ac9f057..666b261acf4 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavLicenseNotif.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavLicenseNotif.tsx
@@ -19,10 +19,10 @@
  */
 import * as React from 'react';
 import { Link } from 'react-router';
-import NavBarNotif from '../../../../components/nav/NavBarNotif';
 import { translate } from '../../../../helpers/l10n';
 import { isValidLicense } from '../../../../api/marketplace';
 import { withAppState } from '../../../../components/withAppState';
+import { Alert } from '../../../../components/ui/Alert';
 
 interface Props {
   appState: Pick<T.AppState, 'canAdmin'>;
@@ -73,16 +73,14 @@ export class ComponentNavLicenseNotif extends React.PureComponent<Props, State>
 
     if (isValidLicense && currentTask.errorType !== 'LICENSING_LOC') {
       return (
-        <NavBarNotif variant="error">
-          <span className="little-spacer-right">
-            {translate('component_navigation.status.last_blocked_due_to_bad_license')}
-          </span>
-        </NavBarNotif>
+        <Alert display="banner" variant="error">
+          {translate('component_navigation.status.last_blocked_due_to_bad_license')}
+        </Alert>
       );
     }
 
     return (
-      <NavBarNotif variant="error">
+      <Alert display="banner" variant="error">
         <span className="little-spacer-right">{currentTask.errorMessage}</span>
         {this.props.appState.canAdmin ? (
           <Link to="/admin/extension/license/app">
@@ -91,7 +89,7 @@ export class ComponentNavLicenseNotif extends React.PureComponent<Props, State>
         ) : (
           translate('please_contact_administrator')
         )}
-      </NavBarNotif>
+      </Alert>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBgTaskNotif-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBgTaskNotif-test.tsx.snap
index 1eb0a5d137b..4b658ea1d1f 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBgTaskNotif-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBgTaskNotif-test.tsx.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders background task error correctly 1`] = `
-<NavBarNotif
+<Alert
+  display="banner"
   variant="error"
 >
   <FormattedMessage
@@ -14,11 +15,12 @@ exports[`renders background task error correctly 1`] = `
       }
     }
   />
-</NavBarNotif>
+</Alert>
 `;
 
 exports[`renders background task error correctly for a different branch/PR 1`] = `
-<NavBarNotif
+<Alert
+  display="banner"
   variant="error"
 >
   <FormattedMessage
@@ -31,11 +33,12 @@ exports[`renders background task error correctly for a different branch/PR 1`] =
       }
     }
   />
-</NavBarNotif>
+</Alert>
 `;
 
 exports[`renders background task error correctly for a different branch/PR 2`] = `
-<NavBarNotif
+<Alert
+  display="banner"
   variant="error"
 >
   <FormattedMessage
@@ -48,16 +51,14 @@ exports[`renders background task error correctly for a different branch/PR 2`] =
       }
     }
   />
-</NavBarNotif>
+</Alert>
 `;
 
 exports[`renders background task in progress info correctly 1`] = `
-<NavBarNotif
+<Alert
+  display="banner"
   variant="info"
 >
-  <i
-    className="spinner spacer-right text-bottom"
-  />
   <FormattedMessage
     defaultMessage="component_navigation.status.in_progress"
     id="component_navigation.status.in_progress"
@@ -68,7 +69,7 @@ exports[`renders background task in progress info correctly 1`] = `
       }
     }
   />
-</NavBarNotif>
+</Alert>
 `;
 
 exports[`renders background task license info correctly 1`] = `
@@ -84,12 +85,10 @@ exports[`renders background task license info correctly 1`] = `
 `;
 
 exports[`renders background task pending info correctly 1`] = `
-<NavBarNotif
+<Alert
+  display="banner"
   variant="info"
 >
-  <PendingIcon
-    className="spacer-right"
-  />
   <FormattedMessage
     defaultMessage="component_navigation.status.pending"
     id="component_navigation.status.pending"
@@ -100,16 +99,14 @@ exports[`renders background task pending info correctly 1`] = `
       }
     }
   />
-</NavBarNotif>
+</Alert>
 `;
 
 exports[`renders background task pending info correctly for admin 1`] = `
-<NavBarNotif
+<Alert
+  display="banner"
   variant="info"
 >
-  <PendingIcon
-    className="spacer-right"
-  />
   <FormattedMessage
     defaultMessage="component_navigation.status.pending.admin"
     id="component_navigation.status.pending.admin"
@@ -134,5 +131,5 @@ exports[`renders background task pending info correctly for admin 1`] = `
       }
     }
   />
-</NavBarNotif>
+</Alert>
 `;
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavLicenseNotif-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavLicenseNotif-test.tsx.snap
index 94c8f9251da..daa3a7095c0 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavLicenseNotif-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavLicenseNotif-test.tsx.snap
@@ -1,19 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders a different message if the license is valid 1`] = `
-<NavBarNotif
+<Alert
+  display="banner"
   variant="error"
 >
-  <span
-    className="little-spacer-right"
-  >
-    component_navigation.status.last_blocked_due_to_bad_license
-  </span>
-</NavBarNotif>
+  component_navigation.status.last_blocked_due_to_bad_license
+</Alert>
 `;
 
 exports[`renders background task license info correctly 1`] = `
-<NavBarNotif
+<Alert
+  display="banner"
   variant="error"
 >
   <span
@@ -29,11 +27,12 @@ exports[`renders background task license info correctly 1`] = `
     license.component_navigation.button.LICENSING
     .
   </Link>
-</NavBarNotif>
+</Alert>
 `;
 
 exports[`renders background task license info correctly 2`] = `
-<NavBarNotif
+<Alert
+  display="banner"
   variant="error"
 >
   <span
@@ -42,11 +41,12 @@ exports[`renders background task license info correctly 2`] = `
     Foo
   </span>
   please_contact_administrator
-</NavBarNotif>
+</Alert>
 `;
 
 exports[`renders correctly for LICENSING_LOC error 1`] = `
-<NavBarNotif
+<Alert
+  display="banner"
   variant="error"
 >
   <span
@@ -62,5 +62,5 @@ exports[`renders correctly for LICENSING_LOC error 1`] = `
     license.component_navigation.button.LICENSING_LOC
     .
   </Link>
-</NavBarNotif>
+</Alert>
 `;
diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx b/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx
index 0e591a980b2..5b5cbc891ff 100644
--- a/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx
@@ -20,11 +20,11 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import InstanceMessage from '../../../../components/common/InstanceMessage';
-import NavBarNotif from '../../../../components/nav/NavBarNotif';
 import RestartForm from '../../../../components/common/RestartForm';
 import { cancelPendingPlugins, PluginPendingResult } from '../../../../api/plugins';
 import { Button } from '../../../../components/ui/buttons';
 import { translate } from '../../../../helpers/l10n';
+import { Alert } from '../../../../components/ui/Alert';
 
 interface Props {
   pending: PluginPendingResult;
@@ -58,34 +58,36 @@ export default class PendingPluginsActionNotif extends React.PureComponent<Props
     }
 
     return (
-      <NavBarNotif className="js-pending" variant="info">
-        <span className="little-spacer-right">
-          <InstanceMessage message={translate('marketplace.instance_needs_to_be_restarted_to')} />
-        </span>
-        {[
-          { length: installing.length, msg: 'marketplace.install_x_plugins' },
-          { length: updating.length, msg: 'marketplace.update_x_plugins' },
-          { length: removing.length, msg: 'marketplace.uninstall_x_plugins' }
-        ]
-          .filter(({ length }) => length > 0)
-          .map(({ length, msg }, idx) => (
-            <span key={msg}>
-              {idx > 0 && '; '}
-              <FormattedMessage
-                defaultMessage={translate(msg)}
-                id={msg}
-                values={{ nb: <strong>{length}</strong> }}
-              />
-            </span>
-          ))}
-        <Button className="spacer-left js-restart" onClick={this.handleOpenRestart}>
-          {translate('marketplace.restart')}
-        </Button>
-        <Button className="spacer-left js-cancel-all button-red" onClick={this.handleRevert}>
-          {translate('marketplace.revert')}
-        </Button>
-        {this.state.openRestart && <RestartForm onClose={this.hanleCloseRestart} />}
-      </NavBarNotif>
+      <Alert className="js-pending" display="banner" variant="info">
+        <div className="display-flex-center">
+          <span className="little-spacer-right">
+            <InstanceMessage message={translate('marketplace.instance_needs_to_be_restarted_to')} />
+          </span>
+          {[
+            { length: installing.length, msg: 'marketplace.install_x_plugins' },
+            { length: updating.length, msg: 'marketplace.update_x_plugins' },
+            { length: removing.length, msg: 'marketplace.uninstall_x_plugins' }
+          ]
+            .filter(({ length }) => length > 0)
+            .map(({ length, msg }, idx) => (
+              <span key={msg}>
+                {idx > 0 && '; '}
+                <FormattedMessage
+                  defaultMessage={translate(msg)}
+                  id={msg}
+                  values={{ nb: <strong>{length}</strong> }}
+                />
+              </span>
+            ))}
+          <Button className="spacer-left js-restart" onClick={this.handleOpenRestart}>
+            {translate('marketplace.restart')}
+          </Button>
+          <Button className="spacer-left js-cancel-all button-red" onClick={this.handleRevert}>
+            {translate('marketplace.revert')}
+          </Button>
+          {this.state.openRestart && <RestartForm onClose={this.hanleCloseRestart} />}
+        </div>
+      </Alert>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/PendingPluginsActionNotif-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/PendingPluginsActionNotif-test.tsx.snap
index 4deb78f7135..9d6f0b78da9 100644
--- a/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/PendingPluginsActionNotif-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/PendingPluginsActionNotif-test.tsx.snap
@@ -1,59 +1,64 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should display pending actions 1`] = `
-<NavBarNotif
+<Alert
   className="js-pending"
+  display="banner"
   variant="info"
 >
-  <span
-    className="little-spacer-right"
+  <div
+    className="display-flex-center"
   >
-    <InstanceMessage
-      message="marketplace.instance_needs_to_be_restarted_to"
-    />
-  </span>
-  <span
-    key="marketplace.install_x_plugins"
-  >
-    <FormattedMessage
-      defaultMessage="marketplace.install_x_plugins"
-      id="marketplace.install_x_plugins"
-      values={
-        Object {
-          "nb": <strong>
-            2
-          </strong>,
+    <span
+      className="little-spacer-right"
+    >
+      <InstanceMessage
+        message="marketplace.instance_needs_to_be_restarted_to"
+      />
+    </span>
+    <span
+      key="marketplace.install_x_plugins"
+    >
+      <FormattedMessage
+        defaultMessage="marketplace.install_x_plugins"
+        id="marketplace.install_x_plugins"
+        values={
+          Object {
+            "nb": <strong>
+              2
+            </strong>,
+          }
         }
-      }
-    />
-  </span>
-  <span
-    key="marketplace.uninstall_x_plugins"
-  >
-    ; 
-    <FormattedMessage
-      defaultMessage="marketplace.uninstall_x_plugins"
-      id="marketplace.uninstall_x_plugins"
-      values={
-        Object {
-          "nb": <strong>
-            1
-          </strong>,
+      />
+    </span>
+    <span
+      key="marketplace.uninstall_x_plugins"
+    >
+      ; 
+      <FormattedMessage
+        defaultMessage="marketplace.uninstall_x_plugins"
+        id="marketplace.uninstall_x_plugins"
+        values={
+          Object {
+            "nb": <strong>
+              1
+            </strong>,
+          }
         }
-      }
-    />
-  </span>
-  <Button
-    className="spacer-left js-restart"
-    onClick={[Function]}
-  >
-    marketplace.restart
-  </Button>
-  <Button
-    className="spacer-left js-cancel-all button-red"
-    onClick={[Function]}
-  >
-    marketplace.revert
-  </Button>
-</NavBarNotif>
+      />
+    </span>
+    <Button
+      className="spacer-left js-restart"
+      onClick={[Function]}
+    >
+      marketplace.restart
+    </Button>
+    <Button
+      className="spacer-left js-cancel-all button-red"
+      onClick={[Function]}
+    >
+      marketplace.revert
+    </Button>
+  </div>
+</Alert>
 `;
diff --git a/server/sonar-web/src/main/js/app/styles/components/alerts.css b/server/sonar-web/src/main/js/app/styles/components/alerts.css
index f5276040c32..54a3c528cf8 100644
--- a/server/sonar-web/src/main/js/app/styles/components/alerts.css
+++ b/server/sonar-web/src/main/js/app/styles/components/alerts.css
@@ -18,8 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 .alert {
-  display: flex;
-  align-items: stretch;
   margin-bottom: var(--gridSize);
   border: 1px solid;
   border-radius: 2px;
@@ -33,6 +31,21 @@
   display: none;
 }
 
+.alert-inner {
+  display: flex;
+  align-items: stretch;
+}
+
+.alert-inner.is-banner {
+  min-width: var(--minPageWidth);
+  max-width: var(--maxPageWidth);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--pagePadding);
+  padding-right: var(--pagePadding);
+  box-sizing: border-box;
+}
+
 .alert-icon {
   flex: 0 0 auto;
   display: flex;
@@ -42,6 +55,11 @@
   border-right: 1px solid;
 }
 
+.alert-icon.is-banner {
+  width: calc(2 * var(--gridSize));
+  border-right: none;
+}
+
 .alert-content {
   flex: 1 0 0;
   padding: var(--gridSize) calc(2 * var(--gridSize));
diff --git a/server/sonar-web/src/main/js/app/styles/components/page.css b/server/sonar-web/src/main/js/app/styles/components/page.css
index a18b282cc45..994c4d37f30 100644
--- a/server/sonar-web/src/main/js/app/styles/components/page.css
+++ b/server/sonar-web/src/main/js/app/styles/components/page.css
@@ -54,7 +54,7 @@
 }
 
 .page-container {
-  min-width: 1080px;
+  min-width: var(--minPageWidth);
 }
 
 .page-wrapper {
diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js
index 1a22613180b..8f81591e034 100644
--- a/server/sonar-web/src/main/js/app/theme.js
+++ b/server/sonar-web/src/main/js/app/theme.js
@@ -102,6 +102,8 @@ module.exports = {
 
   contextNavHeightRaw: 9 * grid,
 
+  maxPageWidth: '1320px',
+  minPageWidth: '1080px',
   pagePadding: '20px',
 
   // different
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Footer.css b/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Footer.css
index c7e8f6ada5e..a3195d22f27 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Footer.css
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Footer.css
@@ -21,7 +21,7 @@
   background-color: var(--sonarcloudBlack800);
   color: var(--sonarcloudBlack300);
   font-size: 12px;
-  min-width: 1080px;
+  min-width: var(--minPageWidth);
 }
 
 .sc-footer *:focus {
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css b/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css
index de00165f256..38b1d66fed3 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css
@@ -187,14 +187,14 @@
 .sc-header-background {
   position: absolute;
   width: 100%;
-  min-width: 1080px;
+  min-width: var(--minPageWidth);
   z-index: 0;
 }
 
 .sc-functionality-background {
   position: relative;
   width: 100%;
-  min-width: 1080px;
+  min-width: var(--minPageWidth);
   margin-top: -150px;
   z-index: 0;
 }
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 7b61b442dad..5c92acf2ea1 100644
--- a/server/sonar-web/src/main/js/components/nav/NavBar.css
+++ b/server/sonar-web/src/main/js/components/nav/NavBar.css
@@ -34,10 +34,10 @@
 
 .navbar-limited {
   position: relative;
-  min-width: 1080px;
-  max-width: 1320px;
+  min-width: var(--minPageWidth);
+  max-width: var(--maxPageWidth);
   margin-left: auto;
   margin-right: auto;
-  padding-left: 20px;
-  padding-right: 20px;
+  padding-left: var(--pagePadding);
+  padding-right: var(--pagePadding);
 }
diff --git a/server/sonar-web/src/main/js/components/nav/NavBarNotif.css b/server/sonar-web/src/main/js/components/nav/NavBarNotif.css
deleted file mode 100644
index ad753aae001..00000000000
--- a/server/sonar-web/src/main/js/components/nav/NavBarNotif.css
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2018 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-.navbar-notif {
-  margin-bottom: var(--gridSize);
-  border: 1px solid;
-  border-left: none;
-  border-right: none;
-  padding: var(--gridSize) 0;
-}
-
-.navbar-notif a,
-.navbar-notif .button-link {
-  border-color: var(--darkBlue);
-}
-
-.navbar-notif-error {
-  border-color: var(--alertBorderError);
-  background-color: var(--alertBackgroundError);
-  color: var(--alertTextError);
-}
-
-.navbar-notif-info {
-  border-color: var(--alertBorderInfo);
-  background-color: var(--alertBackgroundInfo);
-  color: var(--alertTextInfo);
-}
diff --git a/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx b/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx
deleted file mode 100644
index 41d563b23c0..00000000000
--- a/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2018 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import * as classNames from 'classnames';
-import './NavBarNotif.css';
-
-type NavBarNotifVariant = 'error' | 'info';
-
-interface Props {
-  children?: React.ReactNode;
-  className?: string;
-  variant: NavBarNotifVariant;
-}
-
-export default function NavBarNotif(props: Props) {
-  if (!props.children) {
-    return null;
-  }
-  return (
-    <div className={classNames('navbar-notif', `navbar-notif-${props.variant}`, props.className)}>
-      <div className="navbar-limited clearfix">{props.children}</div>
-    </div>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/ui/Alert.tsx b/server/sonar-web/src/main/js/components/ui/Alert.tsx
index d7699877bd1..5e0a5ab1243 100644
--- a/server/sonar-web/src/main/js/components/ui/Alert.tsx
+++ b/server/sonar-web/src/main/js/components/ui/Alert.tsx
@@ -27,7 +27,7 @@ import AlertSuccessIcon from '../icons-components/AlertSuccessIcon';
 import Tooltip from '../controls/Tooltip';
 import { translate } from '../../helpers/l10n';
 
-type AlertDisplay = 'block' | 'inline';
+type AlertDisplay = 'banner' | 'block' | 'inline';
 type AlertVariant = 'error' | 'warning' | 'success' | 'info';
 
 export interface AlertProps {
@@ -44,16 +44,17 @@ export function Alert(props: AlertProps & React.HTMLAttributes<HTMLElement>) {
       })}
       role="alert"
       {...domProps}>
-      <Tooltip overlay={translate('alert.tooltip', variant)}>
-        <div className="alert-icon">
-          {variant === 'error' && <AlertErrorIcon fill={theme.alertIconError} />}
-          {variant === 'warning' && <AlertWarnIcon fill={theme.alertIconWarning} />}
-          {variant === 'success' && <AlertSuccessIcon fill={theme.alertIconSuccess} />}
-          {variant === 'info' && <InfoIcon fill={theme.alertIconInfo} />}
-        </div>
-      </Tooltip>
-
-      <div className="alert-content">{props.children}</div>
+      <div className={classNames('alert-inner', { 'is-banner': display === 'banner' })}>
+        <Tooltip overlay={translate('alert.tooltip', variant)}>
+          <div className={classNames('alert-icon', { 'is-banner': display === 'banner' })}>
+            {variant === 'error' && <AlertErrorIcon fill={theme.alertIconError} />}
+            {variant === 'warning' && <AlertWarnIcon fill={theme.alertIconWarning} />}
+            {variant === 'success' && <AlertSuccessIcon fill={theme.alertIconSuccess} />}
+            {variant === 'info' && <InfoIcon fill={theme.alertIconInfo} />}
+          </div>
+        </Tooltip>
+        <div className="alert-content">{props.children}</div>
+      </div>
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap
index d7528abbc59..3bf04fdbc0f 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap
@@ -6,21 +6,25 @@ exports[`should render 1`] = `
   id="error-message"
   role="alert"
 >
-  <Tooltip
-    overlay="alert.tooltip.error"
+  <div
+    className="alert-inner"
   >
+    <Tooltip
+      overlay="alert.tooltip.error"
+    >
+      <div
+        className="alert-icon"
+      >
+        <AlertErrorIcon
+          fill="#b81723"
+        />
+      </div>
+    </Tooltip>
     <div
-      className="alert-icon"
+      className="alert-content"
     >
-      <AlertErrorIcon
-        fill="#b81723"
-      />
+      This is an error!
     </div>
-  </Tooltip>
-  <div
-    className="alert-content"
-  >
-    This is an error!
   </div>
 </div>
 `;