SONAR-26043 Make DOP icon clickable if a repository URL is returned with the project binding

GitOrigin-RevId: b52e5743de64558e06a71c91ede7782c6b44b615

Author: Hartesic

apps/sq-server/src/main/js/app/components/nav/component/ProjectBindingStatus.tsx

@@ -22,9 +22,8 @@ import {
   Badge,
   BadgeSize,
   BadgeVariety,
+  Button,
   IconLink,
-  LinkHighlight,
-  LinkStandalone,
   Spinner,
   ToggleTip,
   Tooltip,
@@ -91,16 +90,33 @@ export function ProjectBindingStatus({
 
   return (
     <Spinner isLoading={isLoadingProjectBinding}>
-      {almKey && (
-        <Image
-          alt={imageTitle}
-          className={classNames('sw-px-1 sw-align-text-top', className)}
-          height={16}
-          src={DOP_LOGOS[almKey]}
-          title={imageTitle}
-          width={16}
-        />
-      )}
+      {almKey &&
+        (projectBinding?.repositoryUrl ? (
+          <Tooltip
+            content={<FormattedMessage id={imageTitle} values={{ almKey }} />}
+            side={TooltipSide.Right}
+          >
+            <Button
+              className={className}
+              prefix={<Image alt={imageTitle} height={16} src={DOP_LOGOS[almKey]} width={16} />}
+              to={projectBinding?.repositoryUrl}
+            >
+              <FormattedMessage
+                id="project_navigation.binding_status.view_on_x"
+                values={{ dop: <FormattedMessage id={almKey} /> }}
+              />
+            </Button>
+          </Tooltip>
+        ) : (
+          <Image
+            alt={imageTitle}
+            className={classNames('sw-px-1 sw-align-text-top', className)}
+            height={16}
+            src={DOP_LOGOS[almKey]}
+            title={imageTitle}
+            width={16}
+          />
+        ))}
 
       {hasBranchSupport &&
         !almKey &&
@@ -118,14 +134,13 @@ export function ProjectBindingStatus({
             content={<FormattedMessage id="project_navigation.binding_status.bind.tooltip" />}
             side={TooltipSide.Right}
           >
-            <LinkStandalone
+            <Button
               className={className}
-              highlight={LinkHighlight.Default}
-              iconLeft={<IconLink />}
+              prefix={<IconLink />}
               to={getProjectSettingsUrl(component.key, PULL_REQUEST_DECORATION_BINDING_CATEGORY)}
             >
               <FormattedMessage id="project_navigation.binding_status.bind" />
-            </LinkStandalone>
+            </Button>
           </Tooltip>
         )}
     </Spinner>

apps/sq-server/src/main/js/app/components/nav/component/legacy/__tests__/Header-test.tsx

@@ -23,6 +23,7 @@ import userEvent from '@testing-library/user-event';
 import { ComponentQualifier } from '~shared/types/component';
 import AlmSettingsServiceMock from '~sq-server-commons/api/mocks/AlmSettingsServiceMock';
 import BranchesServiceMock from '~sq-server-commons/api/mocks/BranchesServiceMock';
+import { mockProjectAlmBindingResponse } from '~sq-server-commons/helpers/mocks/alm-settings';
 import { mockMainBranch, mockPullRequest } from '~sq-server-commons/helpers/mocks/branch-like';
 import { mockComponent } from '~sq-server-commons/helpers/mocks/component';
 import { mockCurrentUser, mockLoggedInUser } from '~sq-server-commons/helpers/testMocks';
@@ -88,12 +89,14 @@ it('should show the correct help tooltip for applications', async () => {
 it('should show the correct help tooltip when branch support is not enabled', async () => {
   handler.emptyBranchesAndPullRequest();
   handler.addBranch(mockMainBranch());
-  almHandler.handleSetProjectBinding(AlmKeys.GitLab, {
-    almSetting: 'key',
-    project: 'header-project',
-    repository: 'header-project',
-    monorepo: true,
-  });
+  almHandler.setProjectBinding(
+    'header-project',
+    mockProjectAlmBindingResponse({
+      alm: AlmKeys.GitLab,
+      repository: 'header-project',
+      monorepo: true,
+    }),
+  );
   renderHeader(
     {
       currentUser: mockLoggedInUser(),

libs/sq-server-commons/src/api/mocks/AlmSettingsServiceMock.ts

@@ -19,7 +19,10 @@
  */
 
 import { cloneDeep } from 'lodash';
-import { mockAlmSettingsInstance } from '../../helpers/mocks/alm-settings';
+import {
+  mockAlmSettingsInstance,
+  mockProjectAlmBindingResponse,
+} from '../../helpers/mocks/alm-settings';
 import {
   AlmKeys,
   AlmSettingsBindingDefinitions,
@@ -318,18 +321,25 @@ export default class AlmSettingsServiceMock {
   };
 
   handleSetProjectBinding = (alm: AlmKeys, data: EnhancedProjectAlmBindingParam) => {
-    this.#projectsBindings[data.project] = {
-      alm,
-      key: data.almSetting,
-      repository: data.repositoryName ?? (data.repository as string),
-      monorepo: data.monorepo,
-      slug: data.projectName ?? data.slug,
-      summaryCommentEnabled: data.summaryCommentEnabled ?? false,
-      url: 'https://company.com/project',
-    };
+    this.setProjectBinding(
+      data.project,
+      mockProjectAlmBindingResponse({
+        alm,
+        key: data.almSetting,
+        repository: data.repositoryName ?? (data.repository as string),
+        monorepo: data.monorepo,
+        slug: data.projectName ?? data.slug,
+        summaryCommentEnabled: data.summaryCommentEnabled ?? false,
+        url: 'https://company.com/project',
+      }),
+    );
     return this.reply(undefined);
   };
 
+  setProjectBinding = (project: string, binding: ProjectAlmBindingResponse) => {
+    this.#projectsBindings[project] = binding;
+  };
+
   handleSetProjectAzureBinding = (data: AzureProjectAlmBindingParams) => {
     return this.handleSetProjectBinding(AlmKeys.Azure, data);
   };

libs/sq-server-commons/src/l10n/default.ts

@@ -3441,6 +3441,7 @@ export const defaultMessages = {
   'project_navigation.analysis_status.details_link': 'See details',
   'project_navigation.analysis_status.details_link.label': 'See details about the last analysis',
   'project_navigation.binding_status.bound_to_x': 'Bound to {dop}',
+  'project_navigation.binding_status.view_on_x': 'View on {dop}',
   'project_navigation.binding_status.not_bound': 'Not bound',
   'project_navigation.binding_status.not_bound.tooltip':
     'To enable automatically configured PR decoration and privacy settings based on your DevOps platform, ask your admin to bind this project',

libs/sq-server-commons/src/types/alm-settings.ts

@@ -74,6 +74,7 @@ export interface ProjectAlmBindingResponse {
   key: string;
   monorepo: boolean;
   repository: string;
+  repositoryUrl?: string;
   slug?: string;
   summaryCommentEnabled?: boolean;
   url?: string;