SONAR-10457 Display correct quality gate status on short lived branches

14 files changed, 162 insertions, 34 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranch-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranch-test.tsx
index 7eac067d8dc..5258daf383f 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranch-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranch-test.tsx
@@ -52,7 +52,7 @@ it('renders short-living branch', () => {
     isMain: false,
     mergeBranch: 'master',
     name: 'foo',
-    status: { bugs: 0, codeSmells: 0, vulnerabilities: 0 },
+    status: { bugs: 0, codeSmells: 0, qualityGateStatus: 'OK', vulnerabilities: 0 },
     type: BranchType.SHORT
   };
   const component = {} as Component;
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranchesMenu-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranchesMenu-test.tsx
index bb43ec60c63..5a318153fb9 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranchesMenu-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranchesMenu-test.tsx
@@ -94,7 +94,7 @@ function shortBranch(name: string, isOrphan?: true): ShortLivingBranch {
     isOrphan,
     mergeBranch: 'master',
     name,
-    status: { bugs: 0, codeSmells: 0, vulnerabilities: 0 },
+    status: { bugs: 0, codeSmells: 0, qualityGateStatus: 'OK', vulnerabilities: 0 },
     type: BranchType.SHORT
   };
 }
@@ -108,7 +108,7 @@ function pullRequest(title: string): PullRequest {
     base: 'master',
     branch: 'feature',
     key: '1234',
-    status: { bugs: 0, codeSmells: 0, vulnerabilities: 0 },
+    status: { bugs: 0, codeSmells: 0, qualityGateStatus: 'OK', vulnerabilities: 0 },
     title
   };
 }
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranchesMenuItem-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranchesMenuItem-test.tsx
index 0635bea82a8..01995e7f92d 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranchesMenuItem-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranchesMenuItem-test.tsx
@@ -28,7 +28,7 @@ const shortBranch: ShortLivingBranch = {
   isMain: false,
   mergeBranch: 'master',
   name: 'foo',
-  status: { bugs: 1, codeSmells: 2, vulnerabilities: 3 },
+  status: { bugs: 1, codeSmells: 2, qualityGateStatus: 'ERROR', vulnerabilities: 3 },
   type: BranchType.SHORT
 };
 
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavMeta-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavMeta-test.tsx
index 62bdbdbb715..c6bff99c4a9 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavMeta-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavMeta-test.tsx
@@ -37,7 +37,7 @@ it('renders status of short-living branch', () => {
     isMain: false,
     mergeBranch: 'master',
     name: 'feature',
-    status: { bugs: 0, codeSmells: 2, vulnerabilities: 3 },
+    status: { bugs: 0, codeSmells: 2, qualityGateStatus: 'ERROR', vulnerabilities: 3 },
     type: BranchType.SHORT
   };
   expect(
@@ -74,7 +74,7 @@ it('renders meta for pull request', () => {
     base: 'master',
     branch: 'feature',
     key: '1234',
-    status: { bugs: 0, codeSmells: 2, vulnerabilities: 3 },
+    status: { bugs: 0, codeSmells: 2, qualityGateStatus: 'ERROR', vulnerabilities: 3 },
     title: 'Feature PR',
     url: 'https://example.com/pull/1234'
   };
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap
index 6e45772bb56..5f53fb0b983 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap
@@ -152,6 +152,7 @@ exports[`renders short-living branch 1`] = `
           "status": Object {
             "bugs": 0,
             "codeSmells": 0,
+            "qualityGateStatus": "OK",
             "vulnerabilities": 0,
           },
           "type": "SHORT",
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenu-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenu-test.tsx.snap
index cc51efd1976..b30b921ae6b 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenu-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenu-test.tsx.snap
@@ -55,6 +55,7 @@ exports[`renders list 1`] = `
             "status": Object {
               "bugs": 0,
               "codeSmells": 0,
+              "qualityGateStatus": "OK",
               "vulnerabilities": 0,
             },
             "title": "qux",
@@ -99,6 +100,7 @@ exports[`renders list 1`] = `
             "status": Object {
               "bugs": 0,
               "codeSmells": 0,
+              "qualityGateStatus": "OK",
               "vulnerabilities": 0,
             },
             "type": "SHORT",
@@ -127,6 +129,7 @@ exports[`renders list 1`] = `
             "status": Object {
               "bugs": 0,
               "codeSmells": 0,
+              "qualityGateStatus": "OK",
               "vulnerabilities": 0,
             },
             "type": "SHORT",
@@ -195,6 +198,7 @@ exports[`renders list 1`] = `
             "status": Object {
               "bugs": 0,
               "codeSmells": 0,
+              "qualityGateStatus": "OK",
               "vulnerabilities": 0,
             },
             "type": "SHORT",
@@ -250,6 +254,7 @@ exports[`searches 1`] = `
             "status": Object {
               "bugs": 0,
               "codeSmells": 0,
+              "qualityGateStatus": "OK",
               "vulnerabilities": 0,
             },
             "type": "SHORT",
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap
index 781da6de591..df7c8da7b47 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap
@@ -97,6 +97,7 @@ exports[`renders short-living branch 1`] = `
               "status": Object {
                 "bugs": 1,
                 "codeSmells": 2,
+                "qualityGateStatus": "ERROR",
                 "vulnerabilities": 3,
               },
               "type": "SHORT",
@@ -118,6 +119,7 @@ exports[`renders short-living branch 1`] = `
               "status": Object {
                 "bugs": 1,
                 "codeSmells": 2,
+                "qualityGateStatus": "ERROR",
                 "vulnerabilities": 3,
               },
               "type": "SHORT",
@@ -169,6 +171,7 @@ exports[`renders short-living orhpan branch 1`] = `
               "status": Object {
                 "bugs": 1,
                 "codeSmells": 2,
+                "qualityGateStatus": "ERROR",
                 "vulnerabilities": 3,
               },
               "type": "SHORT",
@@ -191,6 +194,7 @@ exports[`renders short-living orhpan branch 1`] = `
               "status": Object {
                 "bugs": 1,
                 "codeSmells": 2,
+                "qualityGateStatus": "ERROR",
                 "vulnerabilities": 3,
               },
               "type": "SHORT",
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
index 46e1c4becd7..06f96d32ee3 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
@@ -61,6 +61,7 @@ exports[`renders meta for pull request 1`] = `
           "status": Object {
             "bugs": 0,
             "codeSmells": 2,
+            "qualityGateStatus": "ERROR",
             "vulnerabilities": 3,
           },
           "title": "Feature PR",
@@ -95,6 +96,7 @@ exports[`renders status of short-living branch 1`] = `
           "status": Object {
             "bugs": 0,
             "codeSmells": 2,
+            "qualityGateStatus": "ERROR",
             "vulnerabilities": 3,
           },
           "type": "SHORT",
diff --git a/server/sonar-web/src/main/js/app/types.ts b/server/sonar-web/src/main/js/app/types.ts
index 106d76e679f..922cbf8cf69 100644
--- a/server/sonar-web/src/main/js/app/types.ts
+++ b/server/sonar-web/src/main/js/app/types.ts
@@ -360,6 +360,7 @@ export interface PullRequest {
   status?: {
     bugs: number;
     codeSmells: number;
+    qualityGateStatus: string;
     vulnerabilities: number;
   };
   title: string;
@@ -440,6 +441,7 @@ export interface ShortLivingBranch extends Branch {
   status?: {
     bugs: number;
     codeSmells: number;
+    qualityGateStatus: string;
     vulnerabilities: number;
   };
   type: BranchType.SHORT;
diff --git a/server/sonar-web/src/main/js/components/common/BranchStatus.tsx b/server/sonar-web/src/main/js/components/common/BranchStatus.tsx
index d2e3f992973..b2e40112112 100644
--- a/server/sonar-web/src/main/js/components/common/BranchStatus.tsx
+++ b/server/sonar-web/src/main/js/components/common/BranchStatus.tsx
@@ -22,9 +22,12 @@ import StatusIndicator from './StatusIndicator';
 import Level from '../ui/Level';
 import BugIcon from '../icons-components/BugIcon';
 import CodeSmellIcon from '../icons-components/CodeSmellIcon';
+import HelpIcon from '../icons-components/HelpIcon';
+import Tooltip from '../controls/Tooltip';
 import VulnerabilityIcon from '../icons-components/VulnerabilityIcon';
 import { BranchLike } from '../../app/types';
 import { isShortLivingBranch, isPullRequest, isLongLivingBranch } from '../../helpers/branches';
+import { translateWithParameters } from '../../helpers/l10n';
 import './BranchStatus.css';
 
 interface Props {
@@ -40,8 +43,8 @@ export default function BranchStatus({ branchLike, concise = false }: Props) {
 
     const totalIssues =
       branchLike.status.bugs + branchLike.status.vulnerabilities + branchLike.status.codeSmells;
-
-    const indicatorColor = totalIssues > 0 ? 'red' : 'green';
+    const indicatorColor = getQualityGateColor(branchLike.status.qualityGateStatus);
+    const shouldDisplayHelper = branchLike.status.qualityGateStatus === 'OK' && totalIssues > 0;
 
     return concise ? (
       <ul className="branch-status">
@@ -52,21 +55,33 @@ export default function BranchStatus({ branchLike, concise = false }: Props) {
       </ul>
     ) : (
       <ul className="branch-status">
-        <li className="spacer-right">
+        <li className="little-spacer-right">
           <StatusIndicator color={indicatorColor} size="small" />
         </li>
         <li className="spacer-left">
           {branchLike.status.bugs}
-          <BugIcon />
+          <BugIcon className="little-spacer-left" />
         </li>
         <li className="spacer-left">
           {branchLike.status.vulnerabilities}
-          <VulnerabilityIcon />
+          <VulnerabilityIcon className="little-spacer-left" />
         </li>
         <li className="spacer-left">
           {branchLike.status.codeSmells}
-          <CodeSmellIcon />
+          <CodeSmellIcon className="little-spacer-left" />
         </li>
+        {shouldDisplayHelper && (
+          <Tooltip
+            overlay={translateWithParameters(
+              'branches.short_lived.quality_gate.description',
+              totalIssues
+            )}
+            placement="right">
+            <li className="spacer-left">
+              <HelpIcon className="text-info" />
+            </li>
+          </Tooltip>
+        )}
       </ul>
     );
   } else if (isLongLivingBranch(branchLike)) {
@@ -79,3 +94,15 @@ export default function BranchStatus({ branchLike, concise = false }: Props) {
     return null;
   }
 }
+
+function getQualityGateColor(status: string) {
+  let indicatorColor = 'gray';
+  if (status === 'ERROR') {
+    indicatorColor = 'red';
+  } else if (status === 'WARN') {
+    indicatorColor = 'orange';
+  } else if (status === 'OK') {
+    indicatorColor = 'green';
+  }
+  return indicatorColor;
+}
diff --git a/server/sonar-web/src/main/js/components/common/StatusIndicator.css b/server/sonar-web/src/main/js/components/common/StatusIndicator.css
index a7e86044211..9d0949597ac 100644
--- a/server/sonar-web/src/main/js/components/common/StatusIndicator.css
+++ b/server/sonar-web/src/main/js/components/common/StatusIndicator.css
@@ -51,3 +51,11 @@
 .status-indicator.green {
   background-color: var(--green);
 }
+
+.status-indicator.orange {
+  background-color: var(--orange);
+}
+
+.status-indicator.gray {
+  background-color: var(--gray71);
+}
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/BranchStatus-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/BranchStatus-test.tsx
index 12aef459919..516d2f6c222 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/BranchStatus-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/BranchStatus-test.tsx
@@ -23,16 +23,22 @@ import BranchStatus from '../BranchStatus';
 import { BranchType, LongLivingBranch, ShortLivingBranch } from '../../../app/types';
 
 it('renders status of short-living branches', () => {
-  checkShort(0, 0, 0);
-  checkShort(0, 1, 0);
-  checkShort(7, 3, 6);
+  checkShort('OK', 0, 0, 0);
+  checkShort('WARN', 0, 1, 0);
+  checkShort('ERROR', 7, 3, 6);
+  checkShort('OK', 0, 0, 1);
 
-  function checkShort(bugs: number, codeSmells: number, vulnerabilities: number) {
+  function checkShort(
+    qualityGateStatus: string,
+    bugs: number,
+    codeSmells: number,
+    vulnerabilities: number
+  ) {
     const shortBranch: ShortLivingBranch = {
       isMain: false,
       mergeBranch: 'master',
       name: 'foo',
-      status: { bugs, codeSmells, vulnerabilities },
+      status: { bugs, codeSmells, qualityGateStatus, vulnerabilities },
       type: BranchType.SHORT
     };
     expect(shallow(<BranchStatus branchLike={shortBranch} />)).toMatchSnapshot();
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/BranchStatus-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/BranchStatus-test.tsx.snap
index d648e77db49..e10d3e2826b 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/BranchStatus-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/BranchStatus-test.tsx.snap
@@ -19,7 +19,7 @@ exports[`renders status of short-living branches 1`] = `
   className="branch-status"
 >
   <li
-    className="spacer-right"
+    className="little-spacer-right"
   >
     <StatusIndicator
       color="green"
@@ -30,19 +30,25 @@ exports[`renders status of short-living branches 1`] = `
     className="spacer-left"
   >
     0
-    <BugIcon />
+    <BugIcon
+      className="little-spacer-left"
+    />
   </li>
   <li
     className="spacer-left"
   >
     0
-    <VulnerabilityIcon />
+    <VulnerabilityIcon
+      className="little-spacer-left"
+    />
   </li>
   <li
     className="spacer-left"
   >
     0
-    <CodeSmellIcon />
+    <CodeSmellIcon
+      className="little-spacer-left"
+    />
   </li>
 </ul>
 `;
@@ -52,10 +58,10 @@ exports[`renders status of short-living branches 2`] = `
   className="branch-status"
 >
   <li
-    className="spacer-right"
+    className="little-spacer-right"
   >
     <StatusIndicator
-      color="red"
+      color="orange"
       size="small"
     />
   </li>
@@ -63,19 +69,25 @@ exports[`renders status of short-living branches 2`] = `
     className="spacer-left"
   >
     0
-    <BugIcon />
+    <BugIcon
+      className="little-spacer-left"
+    />
   </li>
   <li
     className="spacer-left"
   >
     0
-    <VulnerabilityIcon />
+    <VulnerabilityIcon
+      className="little-spacer-left"
+    />
   </li>
   <li
     className="spacer-left"
   >
     1
-    <CodeSmellIcon />
+    <CodeSmellIcon
+      className="little-spacer-left"
+    />
   </li>
 </ul>
 `;
@@ -85,7 +97,7 @@ exports[`renders status of short-living branches 3`] = `
   className="branch-status"
 >
   <li
-    className="spacer-right"
+    className="little-spacer-right"
   >
     <StatusIndicator
       color="red"
@@ -96,19 +108,76 @@ exports[`renders status of short-living branches 3`] = `
     className="spacer-left"
   >
     7
-    <BugIcon />
+    <BugIcon
+      className="little-spacer-left"
+    />
   </li>
   <li
     className="spacer-left"
   >
     6
-    <VulnerabilityIcon />
+    <VulnerabilityIcon
+      className="little-spacer-left"
+    />
   </li>
   <li
     className="spacer-left"
   >
     3
-    <CodeSmellIcon />
+    <CodeSmellIcon
+      className="little-spacer-left"
+    />
+  </li>
+</ul>
+`;
+
+exports[`renders status of short-living branches 4`] = `
+<ul
+  className="branch-status"
+>
+  <li
+    className="little-spacer-right"
+  >
+    <StatusIndicator
+      color="green"
+      size="small"
+    />
   </li>
+  <li
+    className="spacer-left"
+  >
+    0
+    <BugIcon
+      className="little-spacer-left"
+    />
+  </li>
+  <li
+    className="spacer-left"
+  >
+    1
+    <VulnerabilityIcon
+      className="little-spacer-left"
+    />
+  </li>
+  <li
+    className="spacer-left"
+  >
+    0
+    <CodeSmellIcon
+      className="little-spacer-left"
+    />
+  </li>
+  <Tooltip
+    overlay="branches.short_lived.quality_gate.description.1"
+    placement="right"
+  >
+    <li
+      className="spacer-left"
+    >
+      <HelpIcon
+        className="text-info"
+      />
+    </li>
+  </Tooltip>
 </ul>
 `;
diff --git a/server/sonar-web/src/main/js/helpers/__tests__/branches-test.ts b/server/sonar-web/src/main/js/helpers/__tests__/branches-test.ts
index abf8bd87438..934ef060ecc 100644
--- a/server/sonar-web/src/main/js/helpers/__tests__/branches-test.ts
+++ b/server/sonar-web/src/main/js/helpers/__tests__/branches-test.ts
@@ -78,8 +78,12 @@ describe('#isSameBranchLike', () => {
   });
 
   it('compares pull requests', () => {
-    expect(isSameBranchLike(pullRequest({ key: '1234' }), pullRequest({ key: '1234' }))).toBeTruthy();
-    expect(isSameBranchLike(pullRequest({ key: '1234' }), pullRequest({ key: '5678' }))).toBeFalsy();
+    expect(
+      isSameBranchLike(pullRequest({ key: '1234' }), pullRequest({ key: '1234' }))
+    ).toBeTruthy();
+    expect(
+      isSameBranchLike(pullRequest({ key: '1234' }), pullRequest({ key: '5678' }))
+    ).toBeFalsy();
   });
 
   it('compares branches', () => {
@@ -103,7 +107,7 @@ function mainBranch(): MainBranch {
 }
 
 function shortLivingBranch(overrides?: Partial<ShortLivingBranch>): ShortLivingBranch {
-  const status = { bugs: 0, codeSmells: 0, vulnerabilities: 0 };
+  const status = { bugs: 0, codeSmells: 0, qualityGateStatus: 'OK', vulnerabilities: 0 };
   return {
     isMain: false,
     mergeBranch: 'master',
@@ -120,7 +124,7 @@ function longLivingBranch(overrides?: Partial<LongLivingBranch>): LongLivingBran
 }
 
 function pullRequest(overrides?: Partial<PullRequest>): PullRequest {
-  const status = { bugs: 0, codeSmells: 0, vulnerabilities: 0 };
+  const status = { bugs: 0, codeSmells: 0, qualityGateStatus: 'OK', vulnerabilities: 0 };
   return {
     base: 'master',
     branch: 'feature',