SONAR-22717 Change in calculation badge in projects list

3 files changed, 65 insertions, 0 deletions

diff --git a/server/sonar-web/src/main/js/app/components/ChangeInCalculationPill.tsx b/server/sonar-web/src/main/js/app/components/ChangeInCalculationPill.tsx
new file mode 100644
index 00000000000..bdf31ea2a25
--- /dev/null
+++ b/server/sonar-web/src/main/js/app/components/ChangeInCalculationPill.tsx
@@ -0,0 +1,57 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2024 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 { Popover } from '@sonarsource/echoes-react';
+import { Pill } from 'design-system';
+import * as React from 'react';
+import DocumentationLink from '../../components/common/DocumentationLink';
+import { DocLink } from '../../helpers/doc-links';
+import { translate } from '../../helpers/l10n';
+import { useIsLegacyCCTMode } from '../../queries/settings';
+import { ComponentQualifier } from '../../sonar-aligned/types/component';
+
+interface Props {
+  qualifier: ComponentQualifier;
+}
+
+export default function ChangeInCalculation({ qualifier }: Readonly<Props>) {
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+  const { data: isLegacy, isLoading } = useIsLegacyCCTMode();
+
+  if (isLegacy || isLoading) {
+    return null;
+  }
+
+  return (
+    <Popover
+      isOpen={isPopoverOpen}
+      title={translate('projects.awaiting_scan.title')}
+      description={translate(`projects.awaiting_scan.description.${qualifier}`)}
+      footer={
+        <DocumentationLink to={DocLink.CleanCodeIntroduction}>
+          {translate('learn_more')}
+        </DocumentationLink>
+      }
+    >
+      <Pill variant="info" className="sw-ml-2" onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
+        {translate('projects.awaiting_scan')}
+      </Pill>
+    </Popover>
+  );
+}
diff --git a/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx b/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx
index 0c19a7436ee..8bfe5f83eca 100644
--- a/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx
@@ -34,6 +34,7 @@ import { translateWithParameters } from '../../helpers/l10n';
 import { HttpStatus } from '../../helpers/request';
 import { getPortfolioUrl, getProjectUrl, getPullRequestUrl } from '../../helpers/urls';
 import { useBranchesQuery } from '../../queries/branch';
+import { useIsLegacyCCTMode } from '../../queries/settings';
 import { ProjectAlmBindingConfigurationErrors } from '../../types/alm-settings';
 import { Branch } from '../../types/branch-like';
 import { isFile } from '../../types/component';
@@ -72,6 +73,9 @@ function ComponentContainer({ hasFeature }: Readonly<WithAvailableFeaturesProps>
     fixedInPullRequest ? component : undefined,
   );
 
+  //prefetch isLegacyCCTMode
+  useIsLegacyCCTMode();
+
   const isInTutorials = pathname.includes('tutorials');
 
   const fetchComponent = React.useCallback(
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/ComponentContainer-test.tsx b/server/sonar-web/src/main/js/app/components/__tests__/ComponentContainer-test.tsx
index 8a87dad61c3..4f31c39eeb9 100644
--- a/server/sonar-web/src/main/js/app/components/__tests__/ComponentContainer-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/__tests__/ComponentContainer-test.tsx
@@ -51,6 +51,10 @@ jest.mock('../../../api/components', () => ({
     .mockResolvedValue({ component: { name: 'component name', analysisDate: '2018-07-30' } }),
 }));
 
+jest.mock('../../../queries/settings', () => ({
+  useIsLegacyCCTMode: jest.fn(),
+}));
+
 jest.mock('../../../api/navigation', () => ({
   getComponentNavigation: jest.fn().mockResolvedValue({
     breadcrumbs: [{ key: 'portfolioKey', name: 'portfolio', qualifier: 'VW' }],