SONAR-15498 Display branch information on issue page

3 files changed, 87 insertions, 9 deletions

diff --git a/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx b/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx
index 6ee6c5e13d6..c9c8abcd276 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx
@@ -20,9 +20,9 @@
 import * as React from 'react';
 import BranchIcon from '../../../components/icons/BranchIcon';
 import QualifierIcon from '../../../components/icons/QualifierIcon';
-import { translateWithParameters } from '../../../helpers/l10n';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { collapsePath, limitComponentName } from '../../../helpers/path';
-import { ComponentQualifier } from '../../../types/component';
+import { ComponentQualifier, isView } from '../../../types/component';
 import { getSelectedLocation } from '../utils';
 
 interface Props {
@@ -50,6 +50,7 @@ export default function ComponentBreadcrumbs({
     ![ComponentQualifier.SubProject, ComponentQualifier.Directory].includes(
       component.qualifier as ComponentQualifier
     );
+  const displayBranchInformation = isView(component?.qualifier);
 
   const selectedLocation = getSelectedLocation(issue, selectedFlowIndex, selectedLocationIndex);
   const componentName = selectedLocation ? selectedLocation.componentName : issue.componentLongName;
@@ -67,11 +68,17 @@ export default function ComponentBreadcrumbs({
       {displayProject && (
         <span title={projectName}>
           {limitComponentName(issue.projectName)}
-          {issue.branch && (
+          {displayBranchInformation && (
             <>
               {' - '}
-              <BranchIcon />
-              <span>{issue.branch}</span>
+              {issue.branch ? (
+                <>
+                  <BranchIcon />
+                  <span>{issue.branch}</span>
+                </>
+              ) : (
+                <span className="badge">{translate('branches.main_branch')}</span>
+              )}
             </>
           )}
           <span className="slash-separator" />
diff --git a/server/sonar-web/src/main/js/apps/issues/components/__tests__/ComponentBreadcrumbs-test.tsx b/server/sonar-web/src/main/js/apps/issues/components/__tests__/ComponentBreadcrumbs-test.tsx
index d1b04259dad..24e84fc408a 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/__tests__/ComponentBreadcrumbs-test.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/__tests__/ComponentBreadcrumbs-test.tsx
@@ -19,6 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { mockComponent } from '../../../../helpers/mocks/component';
 import { mockIssue } from '../../../../helpers/testMocks';
 import { ComponentQualifier } from '../../../../types/component';
 import ComponentBreadcrumbs from '../ComponentBreadcrumbs';
@@ -38,6 +39,25 @@ it('renders', () => {
   ).toMatchSnapshot();
 });
 
+it('renders issues properly for views', () => {
+  expect(
+    shallow(
+      <ComponentBreadcrumbs
+        component={mockComponent({ qualifier: ComponentQualifier.Portfolio })}
+        issue={{ ...baseIssue, branch: undefined }}
+      />
+    )
+  ).toMatchSnapshot();
+  expect(
+    shallow(
+      <ComponentBreadcrumbs
+        component={mockComponent({ qualifier: ComponentQualifier.Portfolio })}
+        issue={{ ...baseIssue }}
+      />
+    )
+  ).toMatchSnapshot('with branch information');
+});
+
 it('renders with sub-project', () => {
   const issue = { ...baseIssue, subProject: 'sub-proj', subProjectName: 'sub-proj-name' };
   expect(shallow(<ComponentBreadcrumbs component={undefined} issue={issue} />)).toMatchSnapshot();
diff --git a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/ComponentBreadcrumbs-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/ComponentBreadcrumbs-test.tsx.snap
index 783ef3479dc..ef659d7fbc9 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/ComponentBreadcrumbs-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/ComponentBreadcrumbs-test.tsx.snap
@@ -13,10 +13,36 @@ exports[`renders 1`] = `
     title="proj-name - test-branch"
   >
     proj-name
+    <span
+      className="slash-separator"
+    />
+  </span>
+  <span
+    title="comp-name"
+  >
+    comp-name
+  </span>
+</div>
+`;
+
+exports[`renders issues properly for views 1`] = `
+<div
+  aria-label="issues.on_file_x.proj-name, comp-name"
+  className="component-name text-ellipsis"
+>
+  <QualifierIcon
+    className="spacer-right"
+    qualifier="FIL"
+  />
+  <span
+    title="proj-name"
+  >
+    proj-name
      - 
-    <BranchIcon />
-    <span>
-      test-branch
+    <span
+      className="badge"
+    >
+      branches.main_branch
     </span>
     <span
       className="slash-separator"
@@ -30,7 +56,7 @@ exports[`renders 1`] = `
 </div>
 `;
 
-exports[`renders with sub-project 1`] = `
+exports[`renders issues properly for views: with branch information 1`] = `
 <div
   aria-label="issues.on_file_x.proj-name, comp-name"
   className="component-name text-ellipsis"
@@ -53,6 +79,31 @@ exports[`renders with sub-project 1`] = `
     />
   </span>
   <span
+    title="comp-name"
+  >
+    comp-name
+  </span>
+</div>
+`;
+
+exports[`renders with sub-project 1`] = `
+<div
+  aria-label="issues.on_file_x.proj-name, comp-name"
+  className="component-name text-ellipsis"
+>
+  <QualifierIcon
+    className="spacer-right"
+    qualifier="FIL"
+  />
+  <span
+    title="proj-name - test-branch"
+  >
+    proj-name
+    <span
+      className="slash-separator"
+    />
+  </span>
+  <span
     title="sub-proj-name"
   >
     sub-proj-name