SONAR-16556 Do not open rule panel or issues under Project > Measures / Code tabs

6 files changed, 380 insertions, 100 deletions

diff --git a/server/sonar-web/src/main/js/components/issue/Issue.css b/server/sonar-web/src/main/js/components/issue/Issue.css
index 35a34901ecf..6a6731bb901 100644
--- a/server/sonar-web/src/main/js/components/issue/Issue.css
+++ b/server/sonar-web/src/main/js/components/issue/Issue.css
@@ -22,7 +22,8 @@
   padding-top: var(--gridSize);
   padding-bottom: var(--gridSize);
   background-color: var(--issueBgColor);
-  transition: all 0.3s ease, border 0s ease;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
   cursor: pointer;
 }
 
@@ -46,10 +47,6 @@
   margin-top: 5px;
 }
 
-.issue.selected + .issue {
-  border-top-color: transparent;
-}
-
 .issue-row {
   display: flex;
   margin-bottom: 5px;
@@ -59,7 +56,6 @@
 .issue-row-meta {
   padding-right: 5px;
   white-space: nowrap;
-  margin-top: 2px;
 }
 
 .issue-message {
@@ -85,7 +81,7 @@
 }
 
 .issue-meta {
-  line-height: 16px;
+  line-height: var(--smallFontSize);
   font-size: var(--smallFontSize);
   display: flex;
 }
@@ -108,12 +104,6 @@
   white-space: nowrap;
 }
 
-.issue-see-rule {
-  border-bottom: none;
-  font-size: var(--smallFontSize);
-  margin-top: 5px;
-}
-
 .issue-changelog {
   width: 450px;
   max-height: 320px;
@@ -275,7 +265,9 @@
   background-color: var(--secondIssueBgColor);
 }
 
-.issue-message-box.secondary-issue:hover {
+.issue-message-box.secondary-issue:hover,
+.issue:focus-within,
+.issue:hover {
   border: 2px dashed var(--blue);
   outline: 0;
   cursor: pointer;
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx
index ec8aa593d90..d60dd94ec08 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx
@@ -18,36 +18,34 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { ButtonLink } from '../../../components/controls/buttons';
+import { Link } from 'react-router-dom';
+import { getBranchLikeQuery } from '../../../helpers/branch-like';
 import { translate } from '../../../helpers/l10n';
-import { MessageFormatting } from '../../../types/issues';
+import { getComponentIssuesUrl } from '../../../helpers/urls';
+import { BranchLike } from '../../../types/branch-like';
 import { RuleStatus } from '../../../types/rules';
-import { WorkspaceContext } from '../../workspace/context';
+import { Issue } from '../../../types/types';
 import { IssueMessageHighlighting } from '../IssueMessageHighlighting';
 import IssueMessageTags from './IssueMessageTags';
 
 export interface IssueMessageProps {
-  engine?: string;
-  quickFixAvailable?: boolean;
+  issue: Issue;
+  branchLike?: BranchLike;
   displayWhyIsThisAnIssue?: boolean;
-  message: string;
-  messageFormattings?: MessageFormatting[];
-  ruleKey: string;
-  ruleStatus?: RuleStatus;
 }
 
 export default function IssueMessage(props: IssueMessageProps) {
-  const {
-    engine,
-    quickFixAvailable,
-    message,
-    messageFormattings,
-    ruleKey,
-    ruleStatus,
-    displayWhyIsThisAnIssue,
-  } = props;
+  const { issue, branchLike, displayWhyIsThisAnIssue } = props;
 
-  const { openRule } = React.useContext(WorkspaceContext);
+  const { externalRuleEngine, quickFixAvailable, message, messageFormattings, ruleStatus } = issue;
+
+  const whyIsThisAnIssueUrl = getComponentIssuesUrl(issue.project, {
+    ...getBranchLikeQuery(branchLike),
+    files: issue.componentLongName,
+    open: issue.key,
+    resolved: 'false',
+    why: '1',
+  });
 
   return (
     <>
@@ -56,23 +54,20 @@ export default function IssueMessage(props: IssueMessageProps) {
           <IssueMessageHighlighting message={message} messageFormattings={messageFormattings} />
         </span>
         <IssueMessageTags
-          engine={engine}
+          engine={externalRuleEngine}
           quickFixAvailable={quickFixAvailable}
-          ruleStatus={ruleStatus}
+          ruleStatus={ruleStatus as RuleStatus | undefined}
         />
       </div>
       {displayWhyIsThisAnIssue && (
-        <ButtonLink
+        <Link
           aria-label={translate('issue.why_this_issue.long')}
-          className="issue-see-rule spacer-right text-baseline"
-          onClick={() =>
-            openRule({
-              key: ruleKey,
-            })
-          }
+          className="spacer-right"
+          target="_blank"
+          to={whyIsThisAnIssueUrl}
         >
           {translate('issue.why_this_issue')}
-        </ButtonLink>
+        </Link>
       )}
     </>
   );
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.tsx
index b8bfdecfefa..8e63e16a494 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.tsx
@@ -26,7 +26,6 @@ import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { formatMeasure } from '../../../helpers/measures';
 import { getComponentIssuesUrl } from '../../../helpers/urls';
 import { BranchLike } from '../../../types/branch-like';
-import { RuleStatus } from '../../../types/rules';
 import { Issue } from '../../../types/types';
 import LocationIndex from '../../common/LocationIndex';
 import IssueChangelog from './IssueChangelog';
@@ -76,13 +75,9 @@ export default function IssueTitleBar(props: IssueTitleBarProps) {
   return (
     <div className="issue-row">
       <IssueMessage
-        engine={issue.externalRuleEngine}
-        quickFixAvailable={issue.quickFixAvailable}
+        issue={issue}
+        branchLike={props.branchLike}
         displayWhyIsThisAnIssue={displayWhyIsThisAnIssue}
-        message={issue.message}
-        messageFormattings={issue.messageFormattings}
-        ruleKey={issue.rule}
-        ruleStatus={issue.ruleStatus as RuleStatus | undefined}
       />
       <div className="issue-row-meta">
         <div className="issue-meta-list">
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueMessage-test.tsx b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueMessage-test.tsx
index 10d353040a8..8cea8e54049 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueMessage-test.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueMessage-test.tsx
@@ -19,8 +19,9 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { mockBranch } from '../../../../helpers/mocks/branch-like';
+import { mockIssue } from '../../../../helpers/testMocks';
 import { RuleStatus } from '../../../../types/rules';
-import { ButtonLink } from '../../../controls/buttons';
 import IssueMessage, { IssueMessageProps } from '../IssueMessage';
 
 jest.mock('react', () => {
@@ -34,35 +35,31 @@ jest.mock('react', () => {
 
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot('default');
-  expect(shallowRender({ engine: 'js' })).toMatchSnapshot('with engine info');
-  expect(shallowRender({ quickFixAvailable: true })).toMatchSnapshot('with quick fix');
-  expect(shallowRender({ ruleStatus: RuleStatus.Deprecated })).toMatchSnapshot(
-    'is deprecated rule'
+  expect(shallowRender({ issue: mockIssue(false, { externalRuleEngine: 'js' }) })).toMatchSnapshot(
+    'with engine info'
   );
-  expect(shallowRender({ ruleStatus: RuleStatus.Removed })).toMatchSnapshot('is removed rule');
+  expect(shallowRender({ issue: mockIssue(false, { quickFixAvailable: true }) })).toMatchSnapshot(
+    'with quick fix'
+  );
+  expect(
+    shallowRender({ issue: mockIssue(false, { ruleStatus: RuleStatus.Deprecated }) })
+  ).toMatchSnapshot('is deprecated rule');
+  expect(
+    shallowRender({ issue: mockIssue(false, { ruleStatus: RuleStatus.Removed }) })
+  ).toMatchSnapshot('is removed rule');
   expect(shallowRender({ displayWhyIsThisAnIssue: false })).toMatchSnapshot(
     'hide why is it an issue'
   );
 });
 
-it('should open why is this an issue workspace', () => {
-  const openRule = jest.fn();
-  (React.useContext as jest.Mock).mockImplementationOnce(() => ({
-    externalRulesRepoNames: {},
-    openRule,
-  }));
-  const wrapper = shallowRender();
-  wrapper.find(ButtonLink).simulate('click');
-
-  expect(openRule).toHaveBeenCalled();
-});
-
 function shallowRender(props: Partial<IssueMessageProps> = {}) {
   return shallow<IssueMessageProps>(
     <IssueMessage
-      message="Reduce the number of conditional operators (4) used in the expression"
+      issue={mockIssue(false, {
+        message: 'Reduce the number of conditional operators (4) used in the expression',
+      })}
       displayWhyIsThisAnIssue={true}
-      ruleKey="javascript:S1067"
+      branchLike={mockBranch()}
       {...props}
     />
   );
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap
index bc1d76c8876..bff0c5c5ab9 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap
@@ -14,13 +14,20 @@ exports[`should render correctly: default 1`] = `
     </span>
     <IssueMessageTags />
   </div>
-  <ButtonLink
+  <Link
     aria-label="issue.why_this_issue.long"
-    className="issue-see-rule spacer-right text-baseline"
-    onClick={[Function]}
+    className="spacer-right"
+    target="_blank"
+    to={
+      {
+        "hash": "",
+        "pathname": "/project/issues",
+        "search": "?branch=branch-6.7&files=main.js&open=AVsae-CQS-9G3txfbFN2&resolved=false&why=1&id=myproject",
+      }
+    }
   >
     issue.why_this_issue
-  </ButtonLink>
+  </Link>
 </Fragment>
 `;
 
@@ -57,13 +64,20 @@ exports[`should render correctly: is deprecated rule 1`] = `
       ruleStatus="DEPRECATED"
     />
   </div>
-  <ButtonLink
+  <Link
     aria-label="issue.why_this_issue.long"
-    className="issue-see-rule spacer-right text-baseline"
-    onClick={[Function]}
+    className="spacer-right"
+    target="_blank"
+    to={
+      {
+        "hash": "",
+        "pathname": "/project/issues",
+        "search": "?branch=branch-6.7&files=main.js&open=AVsae-CQS-9G3txfbFN2&resolved=false&why=1&id=myproject",
+      }
+    }
   >
     issue.why_this_issue
-  </ButtonLink>
+  </Link>
 </Fragment>
 `;
 
@@ -83,13 +97,20 @@ exports[`should render correctly: is removed rule 1`] = `
       ruleStatus="REMOVED"
     />
   </div>
-  <ButtonLink
+  <Link
     aria-label="issue.why_this_issue.long"
-    className="issue-see-rule spacer-right text-baseline"
-    onClick={[Function]}
+    className="spacer-right"
+    target="_blank"
+    to={
+      {
+        "hash": "",
+        "pathname": "/project/issues",
+        "search": "?branch=branch-6.7&files=main.js&open=AVsae-CQS-9G3txfbFN2&resolved=false&why=1&id=myproject",
+      }
+    }
   >
     issue.why_this_issue
-  </ButtonLink>
+  </Link>
 </Fragment>
 `;
 
@@ -109,13 +130,20 @@ exports[`should render correctly: with engine info 1`] = `
       engine="js"
     />
   </div>
-  <ButtonLink
+  <Link
     aria-label="issue.why_this_issue.long"
-    className="issue-see-rule spacer-right text-baseline"
-    onClick={[Function]}
+    className="spacer-right"
+    target="_blank"
+    to={
+      {
+        "hash": "",
+        "pathname": "/project/issues",
+        "search": "?branch=branch-6.7&files=main.js&open=AVsae-CQS-9G3txfbFN2&resolved=false&why=1&id=myproject",
+      }
+    }
   >
     issue.why_this_issue
-  </ButtonLink>
+  </Link>
 </Fragment>
 `;
 
@@ -135,12 +163,19 @@ exports[`should render correctly: with quick fix 1`] = `
       quickFixAvailable={true}
     />
   </div>
-  <ButtonLink
+  <Link
     aria-label="issue.why_this_issue.long"
-    className="issue-see-rule spacer-right text-baseline"
-    onClick={[Function]}
+    className="spacer-right"
+    target="_blank"
+    to={
+      {
+        "hash": "",
+        "pathname": "/project/issues",
+        "search": "?branch=branch-6.7&files=main.js&open=AVsae-CQS-9G3txfbFN2&resolved=false&why=1&id=myproject",
+      }
+    }
   >
     issue.why_this_issue
-  </ButtonLink>
+  </Link>
 </Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTitleBar-test.tsx.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTitleBar-test.tsx.snap
index ecb2cf2fe3a..d628602e618 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTitleBar-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTitleBar-test.tsx.snap
@@ -5,9 +5,39 @@ exports[`should render correctly: default 1`] = `
   className="issue-row"
 >
   <IssueMessage
-    engine="foo"
-    message="Reduce the number of conditional operators (4) used in the expression"
-    ruleKey="javascript:S1067"
+    issue={
+      {
+        "actions": [],
+        "component": "main.js",
+        "componentEnabled": true,
+        "componentLongName": "main.js",
+        "componentQualifier": "FIL",
+        "componentUuid": "foo1234",
+        "creationDate": "2017-03-01T09:36:01+0100",
+        "externalRuleEngine": "foo",
+        "flows": [],
+        "flowsWithType": [],
+        "key": "AVsae-CQS-9G3txfbFN2",
+        "line": 25,
+        "message": "Reduce the number of conditional operators (4) used in the expression",
+        "project": "myproject",
+        "projectKey": "foo",
+        "projectName": "Foo",
+        "rule": "javascript:S1067",
+        "ruleName": "foo",
+        "secondaryLocations": [],
+        "severity": "MAJOR",
+        "status": "OPEN",
+        "textRange": {
+          "endLine": 26,
+          "endOffset": 15,
+          "startLine": 25,
+          "startOffset": 0,
+        },
+        "transitions": [],
+        "type": "BUG",
+      }
+    }
   />
   <div
     className="issue-row-meta"
@@ -96,9 +126,39 @@ exports[`should render correctly: with filter 1`] = `
   className="issue-row"
 >
   <IssueMessage
-    engine="foo"
-    message="Reduce the number of conditional operators (4) used in the expression"
-    ruleKey="javascript:S1067"
+    issue={
+      {
+        "actions": [],
+        "component": "main.js",
+        "componentEnabled": true,
+        "componentLongName": "main.js",
+        "componentQualifier": "FIL",
+        "componentUuid": "foo1234",
+        "creationDate": "2017-03-01T09:36:01+0100",
+        "externalRuleEngine": "foo",
+        "flows": [],
+        "flowsWithType": [],
+        "key": "AVsae-CQS-9G3txfbFN2",
+        "line": 25,
+        "message": "Reduce the number of conditional operators (4) used in the expression",
+        "project": "myproject",
+        "projectKey": "foo",
+        "projectName": "Foo",
+        "rule": "javascript:S1067",
+        "ruleName": "foo",
+        "secondaryLocations": [],
+        "severity": "MAJOR",
+        "status": "OPEN",
+        "textRange": {
+          "endLine": 26,
+          "endOffset": 15,
+          "startLine": 25,
+          "startOffset": 0,
+        },
+        "transitions": [],
+        "type": "BUG",
+      }
+    }
   />
   <div
     className="issue-row-meta"
@@ -229,8 +289,107 @@ exports[`should render correctly: with multi locations 1`] = `
   className="issue-row"
 >
   <IssueMessage
-    message="Reduce the number of conditional operators (4) used in the expression"
-    ruleKey="javascript:S1067"
+    issue={
+      {
+        "actions": [],
+        "component": "main.js",
+        "componentEnabled": true,
+        "componentLongName": "main.js",
+        "componentQualifier": "FIL",
+        "componentUuid": "foo1234",
+        "creationDate": "2017-03-01T09:36:01+0100",
+        "flows": [
+          [
+            {
+              "component": "main.js",
+              "textRange": {
+                "endLine": 2,
+                "endOffset": 2,
+                "startLine": 1,
+                "startOffset": 1,
+              },
+            },
+            {
+              "component": "main.js",
+              "textRange": {
+                "endLine": 2,
+                "endOffset": 2,
+                "startLine": 1,
+                "startOffset": 1,
+              },
+            },
+            {
+              "component": "main.js",
+              "textRange": {
+                "endLine": 2,
+                "endOffset": 2,
+                "startLine": 1,
+                "startOffset": 1,
+              },
+            },
+          ],
+          [
+            {
+              "component": "main.js",
+              "textRange": {
+                "endLine": 2,
+                "endOffset": 2,
+                "startLine": 1,
+                "startOffset": 1,
+              },
+            },
+            {
+              "component": "main.js",
+              "textRange": {
+                "endLine": 2,
+                "endOffset": 2,
+                "startLine": 1,
+                "startOffset": 1,
+              },
+            },
+          ],
+        ],
+        "flowsWithType": [],
+        "key": "AVsae-CQS-9G3txfbFN2",
+        "line": 25,
+        "message": "Reduce the number of conditional operators (4) used in the expression",
+        "project": "myproject",
+        "projectKey": "foo",
+        "projectName": "Foo",
+        "rule": "javascript:S1067",
+        "ruleName": "foo",
+        "secondaryLocations": [
+          {
+            "component": "main.js",
+            "textRange": {
+              "endLine": 2,
+              "endOffset": 2,
+              "startLine": 1,
+              "startOffset": 1,
+            },
+          },
+          {
+            "component": "main.js",
+            "textRange": {
+              "endLine": 2,
+              "endOffset": 2,
+              "startLine": 1,
+              "startOffset": 1,
+            },
+          },
+        ],
+        "severity": "MAJOR",
+        "status": "OPEN",
+        "textRange": {
+          "endLine": 26,
+          "endOffset": 15,
+          "startLine": 25,
+          "startOffset": 0,
+        },
+        "transitions": [],
+        "type": "BUG",
+      }
+    }
   />
   <div
     className="issue-row-meta"
@@ -398,8 +557,115 @@ exports[`should render correctly: with multi locations and link 1`] = `
   className="issue-row"
 >
   <IssueMessage
-    message="Reduce the number of conditional operators (4) used in the expression"
-    ruleKey="javascript:S1067"
+    branchLike={
+      {
+        "analysisDate": "2018-01-01",
+        "excludedFromPurge": true,
+        "isMain": false,
+        "name": "branch-6.7",
+      }
+    }
+    issue={
+      {
+        "actions": [],
+        "component": "main.js",
+        "componentEnabled": true,
+        "componentLongName": "main.js",
+        "componentQualifier": "FIL",
+        "componentUuid": "foo1234",
+        "creationDate": "2017-03-01T09:36:01+0100",
+        "flows": [
+          [
+            {
+              "component": "main.js",
+              "textRange": {
+                "endLine": 2,
+                "endOffset": 2,
+                "startLine": 1,
+                "startOffset": 1,
+              },
+            },
+            {
+              "component": "main.js",
+              "textRange": {
+                "endLine": 2,
+                "endOffset": 2,
+                "startLine": 1,
+                "startOffset": 1,
+              },
+            },
+            {
+              "component": "main.js",
+              "textRange": {
+                "endLine": 2,
+                "endOffset": 2,
+                "startLine": 1,
+                "startOffset": 1,
+              },
+            },
+          ],
+          [
+            {
+              "component": "main.js",
+              "textRange": {
+                "endLine": 2,
+                "endOffset": 2,
+                "startLine": 1,
+                "startOffset": 1,
+              },
+            },
+            {
+              "component": "main.js",
+              "textRange": {
+                "endLine": 2,
+                "endOffset": 2,
+                "startLine": 1,
+                "startOffset": 1,
+              },
+            },
+          ],
+        ],
+        "flowsWithType": [],
+        "key": "AVsae-CQS-9G3txfbFN2",
+        "line": 25,
+        "message": "Reduce the number of conditional operators (4) used in the expression",
+        "project": "myproject",
+        "projectKey": "foo",
+        "projectName": "Foo",
+        "rule": "javascript:S1067",
+        "ruleName": "foo",
+        "secondaryLocations": [
+          {
+            "component": "main.js",
+            "textRange": {
+              "endLine": 2,
+              "endOffset": 2,
+              "startLine": 1,
+              "startOffset": 1,
+            },
+          },
+          {
+            "component": "main.js",
+            "textRange": {
+              "endLine": 2,
+              "endOffset": 2,
+              "startLine": 1,
+              "startOffset": 1,
+            },
+          },
+        ],
+        "severity": "MAJOR",
+        "status": "OPEN",
+        "textRange": {
+          "endLine": 26,
+          "endOffset": 15,
+          "startLine": 25,
+          "startOffset": 0,
+        },
+        "transitions": [],
+        "type": "BUG",
+      }
+    }
   />
   <div
     className="issue-row-meta"