From e741016a4278fb2816c1ea2f5722d7464ef3c482 Mon Sep 17 00:00:00 2001
From: guillaume-peoch-sonarsource <guillaume.peoch@sonarsource.com>
Date: Wed, 1 Feb 2023 15:56:12 +0100
Subject: [PATCH] SONAR-18383 Remove QG status (Passed/Failed) from Header

---
 .../overview/branches/QualityGatePanel.tsx    |  4 ++-
 .../branches/QualityGatePanelSection.tsx      | 14 ++++-----
 .../QualityGatePanel-test.tsx.snap            | 30 +++++++++----------
 .../QualityGatePanelSection-test.tsx.snap     | 30 +++++++++----------
 .../pullRequests/LargeQualityGateBadge.tsx    |  2 +-
 .../LargeQualityGateBadge-test.tsx.snap       | 12 ++++----
 .../src/main/js/apps/overview/styles.css      |  2 +-
 7 files changed, 48 insertions(+), 46 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx
index dd41fa73376..1eab5de6fdf 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx
@@ -108,7 +108,9 @@ export function QualityGatePanel(props: QualityGatePanelProps) {
                 success,
               })}
             >
-              <h3 className="big-spacer-bottom huge">{translate('metric.level', overallLevel)}</h3>
+              <div className="big-spacer-bottom huge h3">
+                {translate('metric.level', overallLevel)}
+              </div>
 
               <span className="small">
                 {overallFailedConditionsCount > 0
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanelSection.tsx b/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanelSection.tsx
index fe6547c7175..faedae61120 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanelSection.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanelSection.tsx
@@ -117,13 +117,13 @@ export function QualityGatePanelSection(props: QualityGatePanelSectionProps) {
           onClick={toggle}
         >
           <div className="display-flex-center">
-            <h3
-              className="overview-quality-gate-conditions-project-name text-ellipsis"
+            <div
+              className="overview-quality-gate-conditions-project-name text-ellipsis h3"
               title={qgStatus.name}
             >
               {collapsed ? <ChevronRightIcon /> : <ChevronDownIcon />}
               <span className="spacer-left">{qgStatus.name}</span>
-            </h3>
+            </div>
             {collapsed && displayConditions(qgStatus.failedConditions.length)}
           </div>
         </ButtonPlain>
@@ -148,12 +148,12 @@ export function QualityGatePanelSection(props: QualityGatePanelSectionProps) {
           {newCodeFailedConditions.length > 0 && (
             <>
               {showSectionTitles && (
-                <h4 className="big-padded overview-quality-gate-conditions-section-title">
+                <div className="big-padded overview-quality-gate-conditions-section-title h4">
                   {translateWithParameters(
                     'quality_gates.conditions.new_code_x',
                     newCodeFailedConditions.length.toString()
                   )}
-                </h4>
+                </div>
               )}
               <QualityGateConditions
                 component={qgStatus}
@@ -166,12 +166,12 @@ export function QualityGatePanelSection(props: QualityGatePanelSectionProps) {
           {overallFailedConditions.length > 0 && (
             <>
               {showSectionTitles && (
-                <h4 className="big-padded overview-quality-gate-conditions-section-title">
+                <div className="big-padded overview-quality-gate-conditions-section-title h4">
                   {translateWithParameters(
                     'quality_gates.conditions.overall_code_x',
                     overallFailedConditions.length.toString()
                   )}
-                </h4>
+                </div>
               )}
               <QualityGateConditions
                 component={qgStatus}
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/QualityGatePanel-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/QualityGatePanel-test.tsx.snap
index f0dd91c82f5..293440a0cfb 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/QualityGatePanel-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/QualityGatePanel-test.tsx.snap
@@ -29,11 +29,11 @@ exports[`should render correctly for applications 1`] = `
     <div
       className="overview-quality-gate-badge-large failed"
     >
-      <h3
-        className="big-spacer-bottom huge"
+      <div
+        className="big-spacer-bottom huge h3"
       >
         metric.level.ERROR
-      </h3>
+      </div>
       <span
         className="small"
       >
@@ -293,11 +293,11 @@ exports[`should render correctly for applications 2`] = `
     <div
       className="overview-quality-gate-badge-large failed"
     >
-      <h3
-        className="big-spacer-bottom huge"
+      <div
+        className="big-spacer-bottom huge h3"
       >
         metric.level.ERROR
-      </h3>
+      </div>
       <span
         className="small"
       >
@@ -464,11 +464,11 @@ exports[`should render correctly for projects 1`] = `
     <div
       className="overview-quality-gate-badge-large failed"
     >
-      <h3
-        className="big-spacer-bottom huge"
+      <div
+        className="big-spacer-bottom huge h3"
       >
         metric.level.ERROR
-      </h3>
+      </div>
       <span
         className="small"
       >
@@ -600,11 +600,11 @@ exports[`should render correctly for projects 2`] = `
     <div
       className="overview-quality-gate-badge-large success"
     >
-      <h3
-        className="big-spacer-bottom huge"
+      <div
+        className="big-spacer-bottom huge h3"
       >
         metric.level.OK
-      </h3>
+      </div>
       <span
         className="small"
       >
@@ -662,11 +662,11 @@ exports[`should render correctly for projects 3`] = `
     <div
       className="overview-quality-gate-badge-large failed"
     >
-      <h3
-        className="big-spacer-bottom huge"
+      <div
+        className="big-spacer-bottom huge h3"
       >
         metric.level.ERROR
-      </h3>
+      </div>
       <span
         className="small"
       >
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/QualityGatePanelSection-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/QualityGatePanelSection-test.tsx.snap
index 15613e9ec23..75b980c3018 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/QualityGatePanelSection-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/QualityGatePanelSection-test.tsx.snap
@@ -32,11 +32,11 @@ exports[`should render correctly 1`] = `
       }
     />
   </div>
-  <h4
-    className="big-padded overview-quality-gate-conditions-section-title"
+  <div
+    className="big-padded overview-quality-gate-conditions-section-title h4"
   >
     quality_gates.conditions.new_code_x.1
-  </h4>
+  </div>
   <Memo(QualityGateConditions)
     component={
       {
@@ -123,11 +123,11 @@ exports[`should render correctly 1`] = `
       ]
     }
   />
-  <h4
-    className="big-padded overview-quality-gate-conditions-section-title"
+  <div
+    className="big-padded overview-quality-gate-conditions-section-title h4"
   >
     quality_gates.conditions.overall_code_x.1
-  </h4>
+  </div>
   <Memo(QualityGateConditions)
     component={
       {
@@ -230,8 +230,8 @@ exports[`should render correctly 2`] = `
     <div
       className="display-flex-center"
     >
-      <h3
-        className="overview-quality-gate-conditions-project-name text-ellipsis"
+      <div
+        className="overview-quality-gate-conditions-project-name text-ellipsis h3"
         title="Foo"
       >
         <ChevronDownIcon />
@@ -240,14 +240,14 @@ exports[`should render correctly 2`] = `
         >
           Foo
         </span>
-      </h3>
+      </div>
     </div>
   </ButtonPlain>
-  <h4
-    className="big-padded overview-quality-gate-conditions-section-title"
+  <div
+    className="big-padded overview-quality-gate-conditions-section-title h4"
   >
     quality_gates.conditions.new_code_x.1
-  </h4>
+  </div>
   <Memo(QualityGateConditions)
     component={
       {
@@ -334,11 +334,11 @@ exports[`should render correctly 2`] = `
       ]
     }
   />
-  <h4
-    className="big-padded overview-quality-gate-conditions-section-title"
+  <div
+    className="big-padded overview-quality-gate-conditions-section-title h4"
   >
     quality_gates.conditions.overall_code_x.1
-  </h4>
+  </div>
   <Memo(QualityGateConditions)
     component={
       {
diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/LargeQualityGateBadge.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/LargeQualityGateBadge.tsx
index 31a4e536cd0..95802c86f0f 100644
--- a/server/sonar-web/src/main/js/apps/overview/pullRequests/LargeQualityGateBadge.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/LargeQualityGateBadge.tsx
@@ -67,7 +67,7 @@ export function LargeQualityGateBadge({ component, level }: Props) {
         </HelpTooltip>
       </div>
       {level !== undefined && (
-        <h3 className="huge-spacer-top huge">{translate('metric.level', level)}</h3>
+        <div className="huge-spacer-top huge h3">{translate('metric.level', level)}</div>
       )}
     </div>
   );
diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/__tests__/__snapshots__/LargeQualityGateBadge-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/pullRequests/__tests__/__snapshots__/LargeQualityGateBadge-test.tsx.snap
index 5d17f34fe39..04838bb893d 100644
--- a/server/sonar-web/src/main/js/apps/overview/pullRequests/__tests__/__snapshots__/LargeQualityGateBadge-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/__tests__/__snapshots__/LargeQualityGateBadge-test.tsx.snap
@@ -38,11 +38,11 @@ exports[`should render correctly for SQ 1`] = `
       />
     </HelpTooltip>
   </div>
-  <h3
-    className="huge-spacer-top huge"
+  <div
+    className="huge-spacer-top huge h3"
   >
     metric.level.ERROR
-  </h3>
+  </div>
 </div>
 `;
 
@@ -84,10 +84,10 @@ exports[`should render correctly for SQ 2`] = `
       />
     </HelpTooltip>
   </div>
-  <h3
-    className="huge-spacer-top huge"
+  <div
+    className="huge-spacer-top huge h3"
   >
     metric.level.OK
-  </h3>
+  </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index d06f711df32..19dfba11686 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -111,7 +111,7 @@
   height: 160px;
 }
 
-.overview-quality-gate-badge-large h3 {
+.overview-quality-gate-badge-large .h3 {
   color: white;
 }
 
-- 
2.39.5