SONAR-25545 GitHub logo on a bound project now redirects to repository

GitOrigin-RevId: 382f7ceb94c26dd4a36f9b11e6dc76a8fd5ccf69

Author: Hartesic

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

@@ -31,10 +31,12 @@ import {
   TooltipSide,
 } from '@sonarsource/echoes-react';
 import classNames from 'classnames';
-import { forwardRef } from 'react';
+import { noop } from 'lodash';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Image } from '~adapters/components/common/Image';
-import { useCurrentUser } from '~sq-server-commons/context/current-user/CurrentUserContext';
+import { useCurrentUser } from '~adapters/helpers/users';
+import { getGithubRepositories } from '~sq-server-commons/api/alm-integrations';
 import { getProjectSettingsUrl } from '~sq-server-commons/helpers/urls';
 import { useProjectBindingQuery } from '~sq-server-commons/queries/devops-integration';
 import { AlmKeys } from '~sq-server-commons/types/alm-settings';
@@ -67,6 +69,8 @@ export function ProjectBindingStatus({
   className,
   component,
 }: Readonly<ProjectNavBindingStatusProps>) {
+  const [repositoryUrl, setRepositoryUrl] = useState<string | undefined>();
+
   const { formatMessage } = useIntl();
 
   const { currentUser } = useCurrentUser();
@@ -83,9 +87,9 @@ export function ProjectBindingStatus({
       { dop: formatMessage({ id: DOP_LABEL_IDS[almKey] }) },
     );
 
-  return (
-    <Spinner isLoading={isLoadingProjectBinding}>
-      {almKey && (
+  const dopLogoComponent = useMemo(
+    () =>
+      almKey ? (
         <Image
           alt={imageTitle}
           className={classNames('sw-px-1 sw-align-text-top', className)}
@@ -94,6 +98,47 @@ export function ProjectBindingStatus({
           title={imageTitle}
           width={16}
         />
+      ) : null,
+    [almKey, imageTitle, className],
+  );
+
+  useEffect(() => {
+    // Retrieve the URL of the repository bound to this project
+    // Only works for GitHub for now because:
+    // - search_[DOP]_repos endpoints don't return the repository URL for Azure and Bitbucket
+    // - we can filter on search_gitlab_repos with the repository name but
+    //   the project binding object only contains the repository id and not the name
+    if (almKey === undefined) {
+      return;
+    }
+
+    if (almKey === AlmKeys.GitHub) {
+      const [organization, repository] = projectBinding?.repository?.split('/') ?? [];
+      getGithubRepositories({
+        almSetting: almKey,
+        organization,
+        pageSize: 1,
+        query: repository,
+      })
+        .then(({ repositories }) => {
+          setRepositoryUrl(repositories[0].url);
+        })
+        .catch(noop);
+    }
+  }, [almKey, component, projectBinding]);
+
+  return (
+    <Spinner isLoading={isLoadingProjectBinding}>
+      {almKey && repositoryUrl ? (
+        <LinkStandalone
+          className="sw-flex sw-items-center"
+          highlight={LinkHighlight.Default}
+          to={repositoryUrl}
+        >
+          {dopLogoComponent}
+        </LinkStandalone>
+      ) : (
+        dopLogoComponent
       )}
 
       {!almKey && !isLoadingProjectBinding && !component.configuration?.showSettings && (

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

@@ -20,9 +20,13 @@
 
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { byRole } from '~shared/helpers/testSelector';
 import { ComponentQualifier } from '~shared/types/component';
+import AlmIntegrationsServiceMock from '~sq-server-commons/api/mocks/AlmIntegrationsServiceMock';
 import AlmSettingsServiceMock from '~sq-server-commons/api/mocks/AlmSettingsServiceMock';
 import BranchesServiceMock from '~sq-server-commons/api/mocks/BranchesServiceMock';
+import { mockGitHubRepository } from '~sq-server-commons/helpers/mocks/alm-integrations';
+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';
@@ -35,13 +39,29 @@ jest.mock('~sq-server-commons/api/favorites', () => ({
   addFavorite: jest.fn().mockResolvedValue({}),
   removeFavorite: jest.fn().mockResolvedValue({}),
 }));
+jest.mock('~adapters/helpers/users', () => ({
+  ...jest.requireActual<typeof import('~adapters/helpers/users')>('~adapters/helpers/users'),
+  useCurrentUser: () => ({ currentUser: mockLoggedInUser() }),
+}));
+
+const ui = {
+  bindProjectLink: byRole('link', { name: 'project_navigation.binding_status.bind' }),
+  bindingLink: byRole('link', {
+    name: /project_navigation.binding_status.bound_to_x/,
+  }),
+  bindingLogo: byRole('img', {
+    name: /project_navigation.binding_status.bound_to_x/,
+  }),
+};
 
 const handler = new BranchesServiceMock();
 const almHandler = new AlmSettingsServiceMock();
+const almIntegrationsHandler = new AlmIntegrationsServiceMock();
 
 beforeEach(() => {
   handler.reset();
   almHandler.reset();
+  almIntegrationsHandler.reset();
 });
 
 it('should render correctly when there is only 1 branch', async () => {
@@ -108,6 +128,65 @@ it('should show the correct help tooltip when branch support is not enabled', as
   ).toBeInTheDocument();
 });
 
+it('should show "bind project" link when project is not bound and user can bind project', async () => {
+  renderHeader({
+    component: mockComponent({
+      breadcrumbs: [{ name: 'project', key: 'project', qualifier: ComponentQualifier.Project }],
+      configuration: {
+        showSettings: true,
+      },
+    }),
+    currentUser: mockLoggedInUser(),
+  });
+
+  expect(await ui.bindProjectLink.find()).toBeInTheDocument();
+});
+
+it('should show GitHub logo linking to repository when project is bound to GitHub', async () => {
+  almIntegrationsHandler.githubRepositories = [
+    mockGitHubRepository({
+      url: 'https://github.com/org/repo',
+    }),
+  ];
+  almHandler.projectsBindings['project-bound'] = mockProjectAlmBindingResponse({
+    key: 'project-bound',
+    slug: 'org/repo',
+  });
+  renderHeader({
+    component: mockComponent({
+      breadcrumbs: [{ name: 'project', key: 'project', qualifier: ComponentQualifier.Project }],
+      configuration: {
+        showSettings: true,
+      },
+      key: 'project-bound',
+    }),
+    currentUser: mockLoggedInUser(),
+  });
+
+  expect(await ui.bindingLink.find()).toBeInTheDocument();
+});
+
+it('should show GitLab logo (without link) when project is bound to GitLab', async () => {
+  almHandler.projectsBindings['project-bound'] = mockProjectAlmBindingResponse({
+    alm: AlmKeys.GitLab,
+    key: 'project-bound',
+    slug: 'gitlab-repo',
+  });
+  renderHeader({
+    component: mockComponent({
+      breadcrumbs: [{ name: 'project', key: 'project', qualifier: ComponentQualifier.Project }],
+      configuration: {
+        showSettings: true,
+      },
+      key: 'project-bound',
+    }),
+    currentUser: mockLoggedInUser(),
+  });
+
+  expect(await ui.bindingLogo.find()).toBeInTheDocument();
+  expect(ui.bindingLink.query()).not.toBeInTheDocument();
+});
+
 
 function renderHeader(
   props?: Partial<HeaderProps>,
@@ -118,8 +197,8 @@ function renderHeader(
     '/',
     <Header
       component={mockComponent({
-        key: 'header-project',
         breadcrumbs: [{ name: 'project', key: 'project', qualifier: ComponentQualifier.Project }],
+        key: 'header-project',
       })}
       currentUser={mockCurrentUser()}
       {...props}

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

@@ -64,6 +64,8 @@ import {
   setupGitlabProjectCreation,
 } from '../alm-integrations';
 
+jest.mock('../alm-integrations');
+
 function createUniqueNumber() {
   return Math.floor(Date.now() * Math.random());
 }