SONAR-12320 Don't use a badge for the analysis warning

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.css b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.css
index bb9e6e5925ea8fe47b25faced82f92977e30a95c..089be790d739dd9a16c3f81ee6dec7d7ad77a4e5 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.css
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.css
@@ -33,6 +33,14 @@
   max-width: 650px;
 }
 
+.navbar-context-meta .alert {
+  margin-bottom: 0;
+}
+
+.navbar-context-meta .alert-content {
+  padding: 6px 8px;
+}
+
 .navbar-context-meta-branch-menu-title {
   padding-left: calc(3 * var(--gridSize));
 }

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavWarnings.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavWarnings.tsx
index 08cdbbc097fdf26467ea124ed2889f6a6f713648..413cc1ed056b1dd5855b65dcf0190dcd45ce1ab2 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavWarnings.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavWarnings.tsx
@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import WarningIcon from 'sonar-ui-common/components/icons/WarningIcon';
 import { lazyLoad } from 'sonar-ui-common/components/lazyLoad';
+import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 
 const AnalysisWarningsModal = lazyLoad(() =>
@@ -51,8 +51,7 @@ export default class ComponentNavWarnings extends React.PureComponent<Props, Sta
   render() {
     return (
       <>
-        <div className="badge display-inline-flex-center js-component-analysis-warnings flex-1">
-          <WarningIcon className="spacer-right" />
+        <Alert className="js-component-analysis-warnings flex-1" display="inline" variant="warning">
           <FormattedMessage
             defaultMessage={translate('component_navigation.last_analysis_had_warnings')}
             id="component_navigation.last_analysis_had_warnings"
@@ -70,7 +69,7 @@ export default class ComponentNavWarnings extends React.PureComponent<Props, Sta
               )
             }}
           />
-        </div>
+        </Alert>
         {this.state.modal && (
           <AnalysisWarningsModal onClose={this.handleCloseModal} warnings={this.props.warnings} />
         )}

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavWarnings-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavWarnings-test.tsx.snap
index 5f49bd0b0390661560ac3f0c2830122ddd7470d8..0a72b432624eeb3d9de6635f2cc056e422f9dcf1 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavWarnings-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavWarnings-test.tsx.snap
@@ -2,12 +2,11 @@
 
 exports[`should render 1`] = `
 <Fragment>
-  <div
-    className="badge display-inline-flex-center js-component-analysis-warnings flex-1"
+  <Alert
+    className="js-component-analysis-warnings flex-1"
+    display="inline"
+    variant="warning"
   >
-    <WarningIcon
-      className="spacer-right"
-    />
     <FormattedMessage
       defaultMessage="component_navigation.last_analysis_had_warnings"
       id="component_navigation.last_analysis_had_warnings"
@@ -30,7 +29,7 @@ exports[`should render 1`] = `
         }
       }
     />
-  </div>
+  </Alert>
   <LazyLoader
     onClose={[Function]}
     warnings={