SONAR-11651 Display tooltip next to warning quality gate status

server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx

@@ -20,10 +20,11 @@
 import * as React from 'react';
 import { sortBy } from 'lodash';
 import { Link } from 'react-router';
-import ProjectLinkIcon from '../../../components/icons-components/ProjectLinkIcon';
 import DateFromNow from '../../../components/intl/DateFromNow';
 import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
+import HelpTooltip from '../../../components/controls/HelpTooltip';
 import Level from '../../../components/ui/Level';
+import ProjectLinkIcon from '../../../components/icons-components/ProjectLinkIcon';
 import Tooltip from '../../../components/controls/Tooltip';
 import { translateWithParameters, translate } from '../../../helpers/l10n';
 
@@ -56,6 +57,12 @@ export default function ProjectCard({ project }: Props) {
 
         {project.qualityGate !== undefined && (
           <div className="account-project-quality-gate">
+            {project.qualityGate === 'WARN' && (
+              <HelpTooltip
+                className="little-spacer-right"
+                overlay={translate('quality_gates.conditions.warning.tootlip')}
+              />
+            )}
             <Level level={project.qualityGate} />
           </div>
         )}

server/sonar-web/src/main/js/apps/overview/qualityGate/ApplicationQualityGate.tsx

@@ -21,9 +21,10 @@ import * as React from 'react';
 import { keyBy } from 'lodash';
 import ApplicationQualityGateProject from './ApplicationQualityGateProject';
 import Level from '../../../components/ui/Level';
+import DocTooltip from '../../../components/docs/DocTooltip';
+import HelpTooltip from '../../../components/controls/HelpTooltip';
 import { getApplicationQualityGate, ApplicationProject } from '../../../api/quality-gates';
 import { translate } from '../../../helpers/l10n';
-import DocTooltip from '../../../components/docs/DocTooltip';
 
 interface Props {
   branch?: T.LongLivingBranch;
@@ -95,6 +96,12 @@ export default class ApplicationQualityGate extends React.PureComponent<Props, S
             doc={import(/* webpackMode: "eager" */ 'Docs/tooltips/quality-gates/project-homepage-quality-gate.md')}
           />
           {status != null && <Level className="big-spacer-left" level={status} />}
+          {status === 'WARN' && (
+            <HelpTooltip
+              className="little-spacer-left"
+              overlay={translate('quality_gates.conditions.warning.tootlip')}
+            />
+          )}
         </h2>
 
         {projects &&

server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGate.tsx

@@ -59,6 +59,12 @@ export default function QualityGate({ branchLike, component, measures }: Props)
           doc={import(/* webpackMode: "eager" */ 'Docs/tooltips/quality-gates/project-homepage-quality-gate.md')}
         />
         {level && <Level className="big-spacer-left" level={level} />}
+        {level === 'WARN' && (
+          <HelpTooltip
+            className="little-spacer-left"
+            overlay={translate('quality_gates.conditions.warning.tootlip')}
+          />
+        )}
       </div>
 
       {ignoredConditions && (

server/sonar-web/src/main/js/apps/projects/components/ProjectCardQualityGate.tsx

@@ -19,9 +19,10 @@
  */
 import * as React from 'react';
 import Level from '../../../components/ui/Level';
+import HelpTooltip from '../../../components/controls/HelpTooltip';
 import Tooltip from '../../../components/controls/Tooltip';
 import { formatMeasure } from '../../../helpers/measures';
-import { translateWithParameters } from '../../../helpers/l10n';
+import { translateWithParameters, translate } from '../../../helpers/l10n';
 
 interface Props {
   status?: string;
@@ -42,6 +43,12 @@ export default function ProjectCardQualityGate({ status }: Props) {
       <Tooltip overlay={tooltip}>
         <div className="project-card-measure-inner">
           <Level level={status} small={true} />
+          {status === 'WARN' && (
+            <HelpTooltip
+              className="little-spacer-left"
+              overlay={translate('quality_gates.conditions.warning.tootlip')}
+            />
+          )}
         </div>
       </Tooltip>
     </div>

server/sonar-web/src/main/js/apps/projects/filters/QualityGateFilter.tsx

@@ -24,6 +24,7 @@ import { Facet } from '../types';
 import Level from '../../../components/ui/Level';
 import { translate } from '../../../helpers/l10n';
 import { RawQuery } from '../../../helpers/query';
+import HelpTooltip from '../../../components/controls/HelpTooltip';
 
 export interface Props {
   className?: string;
@@ -58,5 +59,15 @@ function getFacetValueForOption(facet: Facet, option: string) {
 }
 
 function renderOption(option: string, selected: boolean) {
-  return <Level level={option} muted={!selected} small={true} />;
+  return (
+    <>
+      <Level level={option} muted={!selected} small={true} />
+      {option === 'WARN' && (
+        <HelpTooltip
+          className="little-spacer-left"
+          overlay={translate('projects.facets.quality_gate.warning_help')}
+        />
+      )}
+    </>
+  );
 }

server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/QualityGateFilter-test.tsx.snap

@@ -23,9 +23,11 @@ exports[`renders 1`] = `
 `;
 
 exports[`renders 2`] = `
-<Level
-  level={2}
-  muted={true}
-  small={true}
-/>
+<React.Fragment>
+  <Level
+    level={2}
+    muted={true}
+    small={true}
+  />
+</React.Fragment>
 `;

server/sonar-web/src/main/js/components/ui/Level.tsx

@@ -35,5 +35,6 @@ export default function Level(props: Props) {
     'level-small': props.small,
     'level-muted': props.muted
   });
+
   return <span className={className}>{formatted}</span>;
 }

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -807,6 +807,7 @@ projects.visualization.duplications=Duplications
 projects.visualization.duplications.description=See duplications' long-term risks to your projects. Bubble size indicates the volume of duplicated blocks in the project, and each bubble's vertical position reflects the volume of lines in those blocks. Small bubbles on the bottom edge are best.
 projects.limited_set_of_projects=Displayed project set limited to the top {0} projects based on current sort: {1}.
 projects.facets.quality_gate=Quality Gate
+projects.facets.quality_gate.warning_help=Warning status is deprecated. This filter will disappear when no Warning Quality Gate remains.
 projects.facets.languages=Languages
 projects.facets.new_lines=New Lines
 projects.facets.tags=Tags
@@ -1242,6 +1243,7 @@ quality_gates.conditions.metric=Metric
 quality_gates.conditions.new_code=On New Code
 quality_gates.conditions.operator=Operator
 quality_gates.conditions.warning=Warning
+quality_gates.conditions.warning.tootlip=Warning status is deprecated and will disappear with the next update of the Quality Gate.
 quality_gates.conditions.error=Error
 quality_gates.duplicated_conditions=This quality gate has duplicated conditions:
 quality_gates.intro.1=Quality Gate is the set of conditions the project must meet before it can be released into production.