1 files changed, 66 insertions, 37 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 6da82da5ca3..985cfa72f48 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
@@ -17,9 +17,12 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { BasicSeparator, Card, Spinner } from 'design-system';
+import { Card, CardSeparator, Spinner, TextError } from 'design-system';
 import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { ComponentQualifier } from '~sonar-aligned/types/component';
+import { translate } from '../../../helpers/l10n';
+import { isDiffMetric } from '../../../helpers/measures';
 import { isApplication } from '../../../types/component';
 import { QualityGateStatus } from '../../../types/quality-gates';
 import { CaycStatus, Component, QualityGate } from '../../../types/types';
@@ -27,31 +30,38 @@ import IgnoredConditionWarning from '../components/IgnoredConditionWarning';
 import ApplicationNonCaycProjectWarning from './ApplicationNonCaycProjectWarning';
 import CleanAsYouCodeWarning from './CleanAsYouCodeWarning';
 import QualityGatePanelSection from './QualityGatePanelSection';
-import QualityGateStatusPassedView from './QualityGateStatusPassedView';
+import SonarLintPromotion from './SonarLintPromotion';
 
 export interface QualityGatePanelProps {
   component: Pick<Component, 'key' | 'qualifier' | 'qualityGate'>;
+  isNewCode?: boolean;
   loading?: boolean;
   qgStatuses?: QualityGateStatus[];
   qualityGate?: QualityGate;
+  showCaycWarningInApp: boolean;
+  showCaycWarningInProject: boolean;
+  totalFailedConditionLength: number;
 }
 
 export function QualityGatePanel(props: QualityGatePanelProps) {
-  const { component, loading, qgStatuses = [], qualityGate } = props;
+  const {
+    component,
+    loading,
+    qgStatuses = [],
+    qualityGate,
+    isNewCode = false,
+    totalFailedConditionLength,
+    showCaycWarningInProject,
+    showCaycWarningInApp,
+  } = props;
 
   if (qgStatuses === undefined) {
     return null;
   }
 
-  const overallLevel = qgStatuses.map((s) => s.status).includes('ERROR') ? 'ERROR' : 'OK';
-  const success = overallLevel === 'OK';
-
   const failedQgStatuses = qgStatuses.filter((qgStatus) => qgStatus.failedConditions.length > 0);
 
-  const overallFailedConditionsCount = qgStatuses.reduce(
-    (acc, qgStatus) => acc + qgStatus.failedConditions.length,
-    0,
-  );
+  const totalFailedCondition = qgStatuses?.flatMap((qg) => qg.failedConditions) ?? [];
 
   const isApp = isApplication(component.qualifier);
 
@@ -66,43 +76,62 @@ export function QualityGatePanel(props: QualityGatePanelProps) {
     qgStatuses.some((p) => Boolean(p.ignoredConditions));
 
   return (
-    <div data-testid="overview__quality-gate-panel">
-      <div className="sw-pt-5">
+    <div data-testid="overview__quality-gate-panel-conditions">
+      <div>
         <Spinner loading={loading}>
-          {success && <QualityGateStatusPassedView />}
-
-          {showIgnoredConditionWarning && <IgnoredConditionWarning />}
-
-          {!success && <BasicSeparator />}
+          {showIgnoredConditionWarning && isNewCode && <IgnoredConditionWarning />}
+
+          {isApp && (
+            <>
+              <TextError
+                className="sw-mb-3"
+                text={
+                  <FormattedMessage
+                    defaultMessage={translate('quality_gates.conditions.x_conditions_failed')}
+                    id="quality_gates.conditions.x_conditions_failed"
+                    values={{
+                      conditions: totalFailedConditionLength,
+                    }}
+                  />
+                }
+              />
+              <CardSeparator />
+            </>
+          )}
 
-          {overallFailedConditionsCount > 0 && (
+          {totalFailedCondition.length > 0 && (
             <div data-test="overview__quality-gate-conditions">
-              {failedQgStatuses.map((qgStatus, qgStatusIdx) => (
-                <QualityGatePanelSection
-                  isApplication={isApp}
-                  isLastStatus={qgStatusIdx === failedQgStatuses.length - 1}
-                  key={qgStatus.key}
-                  qgStatus={qgStatus}
-                  qualityGate={qualityGate}
-                />
-              ))}
+              {failedQgStatuses.map((qgStatus, qgStatusIdx) => {
+                const failedConditionLength = qgStatus.failedConditions.filter((con) =>
+                  isNewCode ? isDiffMetric(con.metric) : !isDiffMetric(con.metric),
+                ).length;
+                if (failedConditionLength > 0) {
+                  return (
+                    <QualityGatePanelSection
+                      isApplication={isApp}
+                      isLastStatus={qgStatusIdx === failedQgStatuses.length - 1}
+                      key={qgStatus.key}
+                      qgStatus={qgStatus}
+                      qualityGate={qualityGate}
+                      isNewCode={isNewCode}
+                    />
+                  );
+                }
+              })}
             </div>
           )}
         </Spinner>
       </div>
 
-      {nonCaycProjectsInApp.length > 0 && (
-        <ApplicationNonCaycProjectWarning projects={nonCaycProjectsInApp} />
+      {showCaycWarningInApp && <ApplicationNonCaycProjectWarning projects={nonCaycProjectsInApp} />}
+
+      {showCaycWarningInProject && (
+        <Card className="sw-mt-4 sw-body-sm">
+          <CleanAsYouCodeWarning component={component} />
+        </Card>
       )}
 
-      {qgStatuses.length === 1 &&
-        qgStatuses[0].caycStatus === CaycStatus.NonCompliant &&
-        qualityGate?.actions?.manageConditions &&
-        !isApp && (
-          <Card className="sw-mt-4 sw-body-sm">
-            <CleanAsYouCodeWarning component={component} />
-          </Card>
-        )}
+      <SonarLintPromotion qgConditions={qgStatuses?.flatMap((qg) => qg.failedConditions)} />
     </div>
   );
 }