From 3391de68abddc5755ecc280b395a5d81447fd47d Mon Sep 17 00:00:00 2001
From: 7PH <benjamin.raymond@sonarsource.com>
Date: Tue, 30 Jan 2024 18:36:58 +0100
Subject: [PATCH] SONAR-21467 Fix see details link to correctly scroll to
 upgrade analysis event

---
 .../js/apps/overview/branches/Analysis.tsx    |  2 +-
 .../js/apps/overview/branches/TabsPanel.tsx   | 22 +++++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx b/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx
index 4904ffd5b55..1f734266d96 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx
@@ -72,7 +72,7 @@ export function Analysis(props: Readonly<AnalysisProps>) {
   );
 
   return (
-    <div className="sw-body-sm">
+    <div data-analysis-key={analysis.key} className="sw-body-sm">
       <div className="sw-flex sw-justify-between sw-mb-1">
         <div className="sw-body-sm-highlight">
           <DateTimeFormatter date={analysis.date} />
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/TabsPanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/TabsPanel.tsx
index 0f0ace130a2..7734ff7952d 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/TabsPanel.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/TabsPanel.tsx
@@ -75,7 +75,7 @@ export function TabsPanel(props: React.PropsWithChildren<MeasuresPanelProps>) {
   const { failingConditionsOnNewCode, failingConditionsOnOverallCode } =
     countFailingConditions(qgStatuses);
 
-  const recentSqUpgradeEvent = React.useMemo(() => {
+  const recentSqUpgrade = React.useMemo(() => {
     if (!analyses || analyses.length === 0) {
       return undefined;
     }
@@ -96,7 +96,7 @@ export function TabsPanel(props: React.PropsWithChildren<MeasuresPanelProps>) {
           hasQpUpdateEvent || event.category === ProjectAnalysisEventCategory.QualityProfile;
 
         if (sqUpgradeEvent !== undefined && hasQpUpdateEvent) {
-          return sqUpgradeEvent;
+          return { analysis, event: sqUpgradeEvent };
         }
       }
     }
@@ -105,11 +105,15 @@ export function TabsPanel(props: React.PropsWithChildren<MeasuresPanelProps>) {
   }, [analyses]);
 
   const scrollToLatestSqUpgradeEvent = () => {
-    document.querySelector(`#${recentSqUpgradeEvent?.key}`)?.scrollIntoView({
-      behavior: 'smooth',
-      block: 'center',
-      inline: 'center',
-    });
+    if (recentSqUpgrade) {
+      document
+        .querySelector(`[data-analysis-key="${recentSqUpgrade.analysis.key}"]`)
+        ?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'center',
+        });
+    }
   };
 
   const tabs = [
@@ -139,7 +143,7 @@ export function TabsPanel(props: React.PropsWithChildren<MeasuresPanelProps>) {
         </div>
       ) : (
         <>
-          {recentSqUpgradeEvent && (
+          {recentSqUpgrade && (
             <div>
               <FlagMessage className="sw-mb-4" variant="info">
                 <FormattedMessage
@@ -151,7 +155,7 @@ export function TabsPanel(props: React.PropsWithChildren<MeasuresPanelProps>) {
                         <FormattedMessage id="overview.quality_profiles_update_after_sq_upgrade.link" />
                       </ButtonLink>
                     ),
-                    sqVersion: recentSqUpgradeEvent.name,
+                    sqVersion: recentSqUpgrade.event.name,
                   }}
                 />
               </FlagMessage>
-- 
2.39.5