SONAR-12106 Add link to overall issues of a file in new slim header

3 files changed, 74 insertions, 10 deletions

diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeaderSlim.css b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeaderSlim.css
index eaaa3d7deb9..97317e012ff 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeaderSlim.css
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeaderSlim.css
@@ -24,7 +24,3 @@
   align-items: center;
   min-height: 25px;
 }
-
-.source-viewer-header-slim-actions {
-  margin-left: calc(3 * var(--gridSize));
-}
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeaderSlim.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeaderSlim.tsx
index cfc2c65ba7f..9342c53651b 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeaderSlim.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeaderSlim.tsx
@@ -18,14 +18,17 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Link } from 'react-router';
+import * as classNames from 'classnames';
 import DeferredSpinner from '../common/DeferredSpinner';
 import Favorite from '../controls/Favorite';
 import ExpandSnippetIcon from '../icons-components/ExpandSnippetIcon';
 import QualifierIcon from '../icons-components/QualifierIcon';
 import { ButtonIcon } from '../ui/buttons';
-import { getPathUrlAsString, getBranchLikeUrl } from '../../helpers/urls';
+import { translate } from '../../helpers/l10n';
+import { getPathUrlAsString, getBranchLikeUrl, getComponentIssuesUrl } from '../../helpers/urls';
 import { collapsedDirFromPath, fileFromPath } from '../../helpers/path';
-import { isMainBranch } from '../../helpers/branches';
+import { isMainBranch, getBranchLikeQuery } from '../../helpers/branches';
 import './SourceViewerHeaderSlim.css';
 
 export interface Props {
@@ -43,7 +46,16 @@ export default function SourceViewerHeaderSlim({
   onExpand,
   sourceViewerFile
 }: Props) {
-  const { key, path, project, projectName, q, subProject, subProjectName } = sourceViewerFile;
+  const {
+    key,
+    measures,
+    path,
+    project,
+    projectName,
+    q,
+    subProject,
+    subProjectName
+  } = sourceViewerFile;
 
   return (
     <div className="source-viewer-header-slim display-flex-row display-flex-space-between">
@@ -78,9 +90,25 @@ export default function SourceViewerHeaderSlim({
         )}
       </div>
 
+      {measures.issues !== undefined && (
+        <div
+          className={classNames('flex-0 big-spacer-left', {
+            'little-spacer-right': !expandable || loading
+          })}>
+          <Link
+            to={getComponentIssuesUrl(project, {
+              ...getBranchLikeQuery(branchLike),
+              fileUuids: sourceViewerFile.uuid,
+              resolved: 'false'
+            })}>
+            {translate('source_viewer.view_all_issues')}
+          </Link>
+        </div>
+      )}
+
       {expandable && (
         <DeferredSpinner className="little-spacer-right" loading={loading}>
-          <div className="source-viewer-header-slim-actions flex-0">
+          <div className="flex-0 big-spacer-left">
             <ButtonIcon className="js-actions" onClick={onExpand}>
               <ExpandSnippetIcon />
             </ButtonIcon>
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeaderSlim-test.tsx.snap b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeaderSlim-test.tsx.snap
index 20f543700bf..c237d08a24c 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeaderSlim-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeaderSlim-test.tsx.snap
@@ -38,12 +38,32 @@ exports[`should render correctly 1`] = `
       </span>
     </div>
   </div>
+  <div
+    className="flex-0 big-spacer-left"
+  >
+    <Link
+      onlyActiveOnIndex={false}
+      style={Object {}}
+      to={
+        Object {
+          "pathname": "/project/issues",
+          "query": Object {
+            "fileUuids": "foo-bar",
+            "id": "my-project",
+            "resolved": "false",
+          },
+        }
+      }
+    >
+      source_viewer.view_all_issues
+    </Link>
+  </div>
   <DeferredSpinner
     className="little-spacer-right"
     timeout={100}
   >
     <div
-      className="source-viewer-header-slim-actions flex-0"
+      className="flex-0 big-spacer-left"
     >
       <ButtonIcon
         className="js-actions"
@@ -101,12 +121,32 @@ exports[`should render correctly for subproject 1`] = `
       </span>
     </div>
   </div>
+  <div
+    className="flex-0 big-spacer-left"
+  >
+    <Link
+      onlyActiveOnIndex={false}
+      style={Object {}}
+      to={
+        Object {
+          "pathname": "/project/issues",
+          "query": Object {
+            "fileUuids": "foo-bar",
+            "id": "my-project",
+            "resolved": "false",
+          },
+        }
+      }
+    >
+      source_viewer.view_all_issues
+    </Link>
+  </div>
   <DeferredSpinner
     className="little-spacer-right"
     timeout={100}
   >
     <div
-      className="source-viewer-header-slim-actions flex-0"
+      className="flex-0 big-spacer-left"
     >
       <ButtonIcon
         className="js-actions"