SONAR-20742 Adjust layout to be coherent with SC

2 files changed, 100 insertions, 81 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/components/MetaTopBar.tsx b/server/sonar-web/src/main/js/apps/overview/components/MetaTopBar.tsx
new file mode 100644
index 00000000000..25a1d43e52f
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/components/MetaTopBar.tsx
@@ -0,0 +1,24 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+
+export default function MetaTopBar() {
+  return <div>Meta top bar</div>;
+}
diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx
index 8a30ca0312d..c02df843b49 100644
--- a/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx
@@ -20,12 +20,11 @@
 import {
   BasicSeparator,
   Card,
+  CenteredLayout,
   CoverageIndicator,
   DuplicationsIndicator,
   HelperHintIcon,
-  LargeCenteredLayout,
   Link,
-  PageTitle,
   Spinner,
   TextMuted,
 } from 'design-system';
@@ -48,10 +47,10 @@ import { Component, MeasureEnhanced } from '../../../types/types';
 import MeasuresPanelIssueMeasure from '../branches/MeasuresPanelIssueMeasure';
 import MeasuresPanelPercentMeasure from '../branches/MeasuresPanelPercentMeasure';
 import IgnoredConditionWarning from '../components/IgnoredConditionWarning';
+import MetaTopBar from '../components/MetaTopBar';
 import QualityGateConditions from '../components/QualityGateConditions';
 import QualityGateStatusHeader from '../components/QualityGateStatusHeader';
 import QualityGateStatusPassedView from '../components/QualityGateStatusPassedView';
-import { QualityGateStatusTitle } from '../components/QualityGateStatusTitle';
 import SonarLintPromotion from '../components/SonarLintPromotion';
 import '../styles.css';
 import { MeasurementType, PR_METRICS } from '../utils';
@@ -93,11 +92,11 @@ export default function PullRequestOverview(props: Props) {
 
   if (loading) {
     return (
-      <LargeCenteredLayout>
+      <CenteredLayout>
         <div className="sw-p-6">
           <Spinner loading />
         </div>
-      </LargeCenteredLayout>
+      </CenteredLayout>
     );
   }
 
@@ -116,99 +115,95 @@ export default function PullRequestOverview(props: Props) {
     .filter(isDefined);
 
   return (
-    <LargeCenteredLayout>
+    <CenteredLayout>
       <div className="it__pr-overview sw-mt-12">
-        <div className="sw-flex">
-          <div className="sw-flex sw-flex-col sw-mr-12 width-30">
-            <QualityGateStatusTitle />
-            <Card>
-              {status && (
-                <QualityGateStatusHeader
-                  status={status}
-                  failedConditionCount={failedConditions.length}
-                />
-              )}
-
-              <div className="sw-flex sw-items-center sw-mb-4">
-                <TextMuted text={translate('overview.on_new_code_long')} />
-                <HelpTooltip
-                  className="sw-ml-2"
-                  overlay={
-                    <FormattedMessage
-                      defaultMessage={translate('overview.quality_gate.conditions_on_new_code')}
-                      id="overview.quality_gate.conditions_on_new_code"
-                      values={{
-                        link: <Link to={path}>{translate('overview.quality_gate')}</Link>,
-                      }}
-                    />
-                  }
-                >
-                  <HelperHintIcon aria-label="help-tooltip" />
-                </HelpTooltip>
-              </div>
+        <MetaTopBar />
+        <BasicSeparator className="sw-my-4" />
+
+        <div className="sw-flex sw-flex-col sw-mr-12 width-30">
+          <Card>
+            {status && (
+              <QualityGateStatusHeader
+                status={status}
+                failedConditionCount={failedConditions.length}
+              />
+            )}
+
+            <div className="sw-flex sw-items-center sw-mb-4">
+              <TextMuted text={translate('overview.on_new_code_long')} />
+              <HelpTooltip
+                className="sw-ml-2"
+                overlay={
+                  <FormattedMessage
+                    defaultMessage={translate('overview.quality_gate.conditions_on_new_code')}
+                    id="overview.quality_gate.conditions_on_new_code"
+                    values={{
+                      link: <Link to={path}>{translate('overview.quality_gate')}</Link>,
+                    }}
+                  />
+                }
+              >
+                <HelperHintIcon aria-label="help-tooltip" />
+              </HelpTooltip>
+            </div>
 
-              {ignoredConditions && <IgnoredConditionWarning />}
+            {ignoredConditions && <IgnoredConditionWarning />}
 
-              {status === 'OK' && failedConditions.length === 0 && <QualityGateStatusPassedView />}
+            {status === 'OK' && failedConditions.length === 0 && <QualityGateStatusPassedView />}
 
-              {status !== 'OK' && <BasicSeparator />}
+            {status !== 'OK' && <BasicSeparator />}
 
-              {failedConditions.length > 0 && (
-                <div>
-                  <QualityGateConditions
-                    branchLike={branchLike}
-                    collapsible
-                    component={component}
-                    failedConditions={failedConditions}
-                  />
-                </div>
-              )}
-            </Card>
-            <SonarLintPromotion qgConditions={conditions} />
-          </div>
+            {failedConditions.length > 0 && (
+              <div>
+                <QualityGateConditions
+                  branchLike={branchLike}
+                  collapsible
+                  component={component}
+                  failedConditions={failedConditions}
+                />
+              </div>
+            )}
+          </Card>
+          <SonarLintPromotion qgConditions={conditions} />
+        </div>
 
-          <div className="sw-flex-1">
-            <div className="sw-body-md-highlight">
-              <PageTitle as="h2" text={translate('overview.measures')} />
-            </div>
+        <div className="sw-flex-1">
+          <div className="sw-grid sw-grid-cols-2 sw-gap-4 sw-mt-4">
+            {[
+              IssueType.Bug,
+              IssueType.CodeSmell,
+              IssueType.Vulnerability,
+              IssueType.SecurityHotspot,
+            ].map((type: IssueType) => (
+              <Card key={type} className="sw-p-8">
+                <MeasuresPanelIssueMeasure
+                  branchLike={branchLike}
+                  component={component}
+                  isNewCodeTab
+                  measures={measures}
+                  type={type}
+                />
+              </Card>
+            ))}
 
-            <div className="sw-grid sw-grid-cols-2 sw-gap-4 sw-mt-4">
-              {[
-                IssueType.Bug,
-                IssueType.CodeSmell,
-                IssueType.Vulnerability,
-                IssueType.SecurityHotspot,
-              ].map((type: IssueType) => (
+            {[MeasurementType.Coverage, MeasurementType.Duplication].map(
+              (type: MeasurementType) => (
                 <Card key={type} className="sw-p-8">
-                  <MeasuresPanelIssueMeasure
+                  <MeasuresPanelPercentMeasure
                     branchLike={branchLike}
                     component={component}
-                    isNewCodeTab
                     measures={measures}
+                    ratingIcon={renderMeasureIcon(type)}
                     type={type}
+                    useDiffMetric
                   />
                 </Card>
-              ))}
-
-              {[MeasurementType.Coverage, MeasurementType.Duplication].map(
-                (type: MeasurementType) => (
-                  <Card key={type} className="sw-p-8">
-                    <MeasuresPanelPercentMeasure
-                      branchLike={branchLike}
-                      component={component}
-                      measures={measures}
-                      ratingIcon={renderMeasureIcon(type)}
-                      type={type}
-                      useDiffMetric
-                    />
-                  </Card>
-                ),
-              )}
-            </div>
+              ),
+            )}
           </div>
         </div>
       </div>
-    </LargeCenteredLayout>
+    </CenteredLayout>
   );
 }