From c4a65bea894a07d985e8a0421eeddf5cdaa168e2 Mon Sep 17 00:00:00 2001
From: stanislavh <stanislav.honcharov@sonarsource.com>
Date: Thu, 21 Dec 2023 16:24:07 +0100
Subject: [PATCH] SONAR-21259 Disable fixed and accepted link when reindexing +
 ux improvements

---
 .../design-system/src/components/Link.tsx     |  9 +++
 .../src/components/icons/SnoozeCircleIcon.tsx |  2 +-
 .../overview/branches/AcceptedIssuesPanel.tsx |  6 +-
 .../components/IssueMeasuresCardInner.tsx     | 61 ++++++++++++++-----
 .../pullRequests/IssueMeasuresCard.tsx        |  2 +
 5 files changed, 61 insertions(+), 19 deletions(-)

diff --git a/server/sonar-web/design-system/src/components/Link.tsx b/server/sonar-web/design-system/src/components/Link.tsx
index 35d55d43210..402b99493b9 100644
--- a/server/sonar-web/design-system/src/components/Link.tsx
+++ b/server/sonar-web/design-system/src/components/Link.tsx
@@ -218,6 +218,15 @@ DiscreetLink.displayName = 'DiscreetLink';
 export const ContentLink = styled(HoverLink)`
   --color: ${themeColor('pageTitle')};
   --border: ${themeBorder('default', 'contentLinkBorder')};
+
+  ${({ disabled }) => (disabled ? tw`sw-cursor-default` : '')};
+
+  ${({ disabled, theme }) =>
+    disabled
+      ? `--active: ${themeColor('pageTitle')({ theme })};
+         --border: none;
+         --borderActive: none;`
+      : ''}
 `;
 ContentLink.displayName = 'ContentLink';
 
diff --git a/server/sonar-web/design-system/src/components/icons/SnoozeCircleIcon.tsx b/server/sonar-web/design-system/src/components/icons/SnoozeCircleIcon.tsx
index a43b4afb71d..8982c6a1f31 100644
--- a/server/sonar-web/design-system/src/components/icons/SnoozeCircleIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/SnoozeCircleIcon.tsx
@@ -21,7 +21,7 @@ import { useTheme } from '@emotion/react';
 import { themeColor, themeContrast } from '../../helpers';
 import { CustomIcon, IconProps } from './Icon';
 
-export function SnoozeCircleIcon(props: Readonly<{ neutral?: boolean } & IconProps>) {
+export function SnoozeCircleIcon(props: Readonly<IconProps>) {
   const theme = useTheme();
 
   const bgColor = themeColor('overviewCardWarningIcon')({ theme });
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/AcceptedIssuesPanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/AcceptedIssuesPanel.tsx
index a03ea74eec2..ad6ed395d58 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/AcceptedIssuesPanel.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/AcceptedIssuesPanel.tsx
@@ -92,21 +92,21 @@ function AcceptedIssuesPanel(props: Readonly<AcceptedIssuesPanelProps>) {
           <Card className="sw-flex sw-gap-4">
             <IssueMeasuresCardInner
               className={classNames({ 'sw-w-1/2': !isNewCode, 'sw-w-full': isNewCode })}
+              noDataIconClassName="sw--translate-y-3"
               metric={MetricKey.accepted_issues}
               value={formatMeasure(acceptedCount, MetricType.ShortInteger)}
               header={intl.formatMessage({
                 id: isNewCode ? 'overview.accepted_issues' : 'overview.accepted_issues.total',
               })}
               url={acceptedIssuesUrl}
-              icon={
-                <SnoozeCircleIcon className="sw--translate-y-3" neutral={acceptedCount === '0'} />
-              }
+              icon={<SnoozeCircleIcon className="sw--translate-y-3" />}
             />
             {!isNewCode && (
               <>
                 <StyledCardSeparator />
                 <IssueMeasuresCardInner
                   className="sw-w-1/2"
+                  noDataIconClassName="sw--translate-y-3"
                   metric={MetricKey.high_impact_accepted_issues}
                   value={formatMeasure(acceptedWithHighImpactCount, MetricType.ShortInteger)}
                   header={intl.formatMessage({
diff --git a/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx b/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx
index 3c6e7efd861..32a3af91597 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx
@@ -19,13 +19,16 @@
  */
 import styled from '@emotion/styled';
 import classNames from 'classnames';
-import { Badge, ContentLink, themeColor } from 'design-system';
+import { Badge, ContentLink, LightLabel, NoDataIcon, themeColor } from 'design-system';
 import * as React from 'react';
 import { Path } from 'react-router-dom';
+import Tooltip from '../../../components/controls/Tooltip';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { localizeMetric } from '../../../helpers/measures';
 import { MetricKey } from '../../../types/metrics';
 
+const NO_DATA_ICON_SIZE = 36;
+
 interface IssueMeasuresCardInnerProps extends React.HTMLAttributes<HTMLDivElement> {
   metric: MetricKey;
   value?: string;
@@ -33,11 +36,25 @@ interface IssueMeasuresCardInnerProps extends React.HTMLAttributes<HTMLDivElemen
   url: Path;
   failed?: boolean;
   icon?: React.ReactNode;
+  linkDisabled?: boolean;
   footer?: React.ReactNode;
+  noDataIconClassName?: string;
 }
 
 export function IssueMeasuresCardInner(props: Readonly<IssueMeasuresCardInnerProps>) {
-  const { header, metric, icon, value, url, failed, footer, className, ...rest } = props;
+  const {
+    header,
+    metric,
+    icon,
+    value,
+    url,
+    failed,
+    footer,
+    className,
+    noDataIconClassName,
+    linkDisabled,
+    ...rest
+  } = props;
 
   return (
     <div className={classNames('sw-flex sw-flex-col sw-gap-3', className)} {...rest}>
@@ -53,20 +70,34 @@ export function IssueMeasuresCardInner(props: Readonly<IssueMeasuresCardInnerPro
         </ColorBold>
         <div className="sw-flex sw-justify-between sw-items-center sw-h-9">
           <div className="sw-h-fit">
-            <ContentLink
-              aria-label={translateWithParameters(
-                'overview.see_more_details_on_x_of_y',
-                value || '0',
-                localizeMetric(metric),
-              )}
-              className="it__overview-measures-value sw-w-fit sw-text-lg"
-              to={url}
-            >
-              {value || '0'}
-            </ContentLink>
+            {value ? (
+              <ContentLink
+                disabled={linkDisabled}
+                aria-label={translateWithParameters(
+                  'overview.see_more_details_on_x_of_y',
+                  value,
+                  localizeMetric(metric),
+                )}
+                className="it__overview-measures-value sw-w-fit sw-text-lg"
+                to={url}
+              >
+                {value}
+              </ContentLink>
+            ) : (
+              <Tooltip overlay={translate('no_data')}>
+                <LightLabel aria-label={translate('no_data')}> — </LightLabel>
+              </Tooltip>
+            )}
           </div>
-
-          {icon}
+          {value ? (
+            icon
+          ) : (
+            <NoDataIcon
+              className={noDataIconClassName}
+              width={NO_DATA_ICON_SIZE}
+              height={NO_DATA_ICON_SIZE}
+            />
+          )}
         </div>
       </div>
       {footer}
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 434b05076ee..4ed4ff02564 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
@@ -111,6 +111,7 @@ export default function IssueMeasuresCard(
         header={intl.formatMessage({ id: 'overview.pull_request.accepted_issues' })}
         metric={MetricKey.new_accepted_issues}
         value={formatMeasure(acceptedCount, MetricType.ShortInteger)}
+        linkDisabled={component.needIssueSync}
         url={acceptedUrl}
         icon={acceptedCount !== '0' && <SnoozeCircleIcon />}
         footer={
@@ -144,6 +145,7 @@ export default function IssueMeasuresCard(
         }
         metric={MetricKey.pull_request_fixed_issues}
         value={formatMeasure(fixedCount, MetricType.ShortInteger)}
+        linkDisabled={component.needIssueSync}
         url={fixedUrl}
         icon={fixedCount !== '0' && <TrendDownCircleIcon />}
         footer={
-- 
2.39.5