SONAR-22218 Deprecate old tooltips and migrate some of them

4 files changed, 39 insertions, 32 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureBreakdownCard.tsx b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureBreakdownCard.tsx
index 97a2b330269..73d7c60c3ee 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureBreakdownCard.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureBreakdownCard.tsx
@@ -18,8 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
+import { Tooltip } from '@sonarsource/echoes-react';
 import classNames from 'classnames';
-import { DiscreetLinkBox, Tooltip, themeColor, themeContrast } from 'design-system';
+import { DiscreetLinkBox, themeColor, themeContrast } from 'design-system';
 import * as React from 'react';
 import { useIntl } from 'react-intl';
 import { formatMeasure } from '~sonar-aligned/helpers/measures';
@@ -72,7 +73,7 @@ export function SoftwareImpactMeasureBreakdownCard(
 
   return (
     <Tooltip
-      overlay={intl.formatMessage({
+      content={intl.formatMessage({
         id: `overview.measures.software_impact.severity.${severity}.tooltip`,
       })}
     >
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx
index 0586663c04d..00093074e7c 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx
@@ -18,14 +18,13 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import { LinkHighlight, LinkStandalone } from '@sonarsource/echoes-react';
+import { LinkHighlight, LinkStandalone, Tooltip } from '@sonarsource/echoes-react';
 import { Badge, LightGreyCard, LightGreyCardTitle, TextBold, TextSubdued } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { formatMeasure } from '~sonar-aligned/helpers/measures';
 import { getComponentIssuesUrl } from '~sonar-aligned/helpers/urls';
 import { MetricKey, MetricType } from '~sonar-aligned/types/metrics';
-import Tooltip from '../../../components/controls/Tooltip';
 import { DEFAULT_ISSUES_QUERY } from '../../../components/shared/utils';
 import {
   SOFTWARE_QUALITIES_METRIC_KEYS_MAP,
@@ -109,7 +108,7 @@ export function SoftwareImpactMeasureCard(props: Readonly<SoftwareImpactBreakdow
         <div className="sw-flex sw-mt-4">
           <div className="sw-flex sw-gap-1 sw-items-center">
             {count ? (
-              <Tooltip overlay={countTooltipOverlay}>
+              <Tooltip content={countTooltipOverlay}>
                 <LinkStandalone
                   data-testid={`overview__software-impact-${softwareQuality}`}
                   aria-label={intl.formatMessage(
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureRating.tsx b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureRating.tsx
index 1f6c0edaaa4..6f0f1f4bc7f 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureRating.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureRating.tsx
@@ -17,7 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { MetricsRatingBadge, Tooltip } from 'design-system';
+import { Tooltip } from '@sonarsource/echoes-react';
+import { MetricsRatingBadge } from 'design-system';
 import * as React from 'react';
 import { useIntl } from 'react-intl';
 import { formatRating } from '../../../helpers/measures';
@@ -36,28 +37,33 @@ export function SoftwareImpactMeasureRating(props: Readonly<SoftwareImpactMeasur
 
   const rating = formatRating(value);
 
+  const additionalInfo =
+    SoftwareImpactRatingTooltip({
+      rating,
+      softwareQuality,
+    }) ?? undefined;
+
   return (
-    <Tooltip
-      overlay={SoftwareImpactRatingTooltip({
-        rating,
-        softwareQuality,
-      })}
-    >
-      <MetricsRatingBadge
-        size="md"
-        className="sw-text-sm"
-        rating={rating}
-        label={intl.formatMessage(
-          {
-            id: 'overview.project.software_impact.has_rating',
-          },
-          {
-            softwareQuality: intl.formatMessage({ id: `software_quality.${softwareQuality}` }),
-            rating,
-          },
-        )}
-      />
-    </Tooltip>
+    <>
+      <Tooltip content={additionalInfo}>
+        <MetricsRatingBadge
+          size="md"
+          className="sw-text-sm"
+          rating={rating}
+          label={intl.formatMessage(
+            {
+              id: 'overview.project.software_impact.has_rating',
+            },
+            {
+              softwareQuality: intl.formatMessage({ id: `software_quality.${softwareQuality}` }),
+              rating,
+            },
+          )}
+        />
+      </Tooltip>
+      {/* The badge is not interactive, so show the tooltip content for screen-readers only */}
+      <span className="sw-sr-only">{additionalInfo}</span>
+    </>
   );
 }
 
diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/IssueMeasuresCard.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/IssueMeasuresCard.tsx
index 6dc229906c6..1036ac37e3a 100644
--- a/server/sonar-web/src/main/js/apps/overview/pullRequests/IssueMeasuresCard.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/IssueMeasuresCard.tsx
@@ -22,11 +22,9 @@ import {
   HelperHintIcon,
   LightGreyCard,
   LightLabel,
-  PopupPlacement,
   SnoozeCircleIcon,
   TextError,
   TextSubdued,
-  Tooltip,
   TrendDownCircleIcon,
   TrendUpCircleIcon,
   themeColor,
@@ -37,6 +35,7 @@ import { getBranchLikeQuery } from '~sonar-aligned/helpers/branch-like';
 import { formatMeasure } from '~sonar-aligned/helpers/measures';
 import { getComponentIssuesUrl } from '~sonar-aligned/helpers/urls';
 import { MetricKey, MetricType } from '~sonar-aligned/types/metrics';
+import Tooltip from '../../../components/controls/Tooltip';
 import { getLeakValue } from '../../../components/measure/utils';
 import { DEFAULT_ISSUES_QUERY } from '../../../components/shared/utils';
 import { findMeasure } from '../../../helpers/measures';
@@ -134,17 +133,19 @@ export default function IssueMeasuresCard(
           <>
             {intl.formatMessage({ id: 'overview.pull_request.fixed_issues' })}
             <Tooltip
-              overlay={
+              content={
                 <div className="sw-flex sw-flex-col sw-gap-4">
                   <span>
                     {intl.formatMessage({ id: 'overview.pull_request.fixed_issues.disclaimer' })}
                   </span>
                   <span>
-                    {intl.formatMessage({ id: 'overview.pull_request.fixed_issues.disclaimer.2' })}
+                    {intl.formatMessage({
+                      id: 'overview.pull_request.fixed_issues.disclaimer.2',
+                    })}
                   </span>
                 </div>
               }
-              placement={PopupPlacement.Top}
+              side="top"
             >
               <HelperHintIcon raised />
             </Tooltip>