SONAR-13509 Adding title and link to rule in hotspot page.

server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerRenderer.tsx

@@ -19,6 +19,7 @@
  */
 import * as classNames from 'classnames';
 import * as React from 'react';
+import { Link } from 'react-router';
 import { Button } from 'sonar-ui-common/components/controls/buttons';
 import { ClipboardButton } from 'sonar-ui-common/components/controls/clipboard';
 import LinkIcon from 'sonar-ui-common/components/icons/LinkIcon';
@@ -27,7 +28,7 @@ import { translate } from 'sonar-ui-common/helpers/l10n';
 import { getPathUrlAsString } from 'sonar-ui-common/helpers/urls';
 import { withCurrentUser } from '../../../components/hoc/withCurrentUser';
 import { getBranchLikeQuery } from '../../../helpers/branch-like';
-import { getComponentSecurityHotspotsUrl } from '../../../helpers/urls';
+import { getComponentSecurityHotspotsUrl, getRuleUrl } from '../../../helpers/urls';
 import { isLoggedIn } from '../../../helpers/users';
 import { BranchLike } from '../../../types/branch-like';
 import { Hotspot } from '../../../types/security-hotspots';
@@ -78,7 +79,17 @@ export function HotspotViewerRenderer(props: HotspotViewerRendererProps) {
       {hotspot && (
         <div className="big-padded hotspot-content">
           <div className="huge-spacer-bottom display-flex-space-between">
-            <strong className="big big-spacer-right">{hotspot.message}</strong>
+            <div className="display-flex-column">
+              <strong className="big big-spacer-right little-spacer-bottom">
+                {hotspot.message}
+              </strong>
+              <div>
+                <span className="note padded-right">{hotspot.rule.name}</span>
+                <Link className="small" to={getRuleUrl(hotspot.rule.key)} target="_blank">
+                  {hotspot.rule.key}
+                </Link>
+              </div>
+            </div>
             <div className="display-flex-row flex-0">
               {isLoggedIn(currentUser) && (
                 <>

server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotViewerRenderer-test.tsx.snap

@@ -11,11 +11,39 @@ exports[`should render correctly 1`] = `
     <div
       className="huge-spacer-bottom display-flex-space-between"
     >
-      <strong
-        className="big big-spacer-right"
+      <div
+        className="display-flex-column"
       >
-        '3' is a magic number.
-      </strong>
+        <strong
+          className="big big-spacer-right little-spacer-bottom"
+        >
+          '3' is a magic number.
+        </strong>
+        <div>
+          <span
+            className="note padded-right"
+          >
+            That rule
+          </span>
+          <Link
+            className="small"
+            onlyActiveOnIndex={false}
+            style={Object {}}
+            target="_blank"
+            to={
+              Object {
+                "pathname": "/coding_rules",
+                "query": Object {
+                  "open": "squid:S2077",
+                  "rule_key": "squid:S2077",
+                },
+              }
+            }
+          >
+            squid:S2077
+          </Link>
+        </div>
+      </div>
       <div
         className="display-flex-row flex-0"
       >
@@ -657,11 +685,39 @@ exports[`should render correctly: anonymous user 1`] = `
     <div
       className="huge-spacer-bottom display-flex-space-between"
     >
-      <strong
-        className="big big-spacer-right"
+      <div
+        className="display-flex-column"
       >
-        '3' is a magic number.
-      </strong>
+        <strong
+          className="big big-spacer-right little-spacer-bottom"
+        >
+          '3' is a magic number.
+        </strong>
+        <div>
+          <span
+            className="note padded-right"
+          >
+            That rule
+          </span>
+          <Link
+            className="small"
+            onlyActiveOnIndex={false}
+            style={Object {}}
+            target="_blank"
+            to={
+              Object {
+                "pathname": "/coding_rules",
+                "query": Object {
+                  "open": "squid:S2077",
+                  "rule_key": "squid:S2077",
+                },
+              }
+            }
+          >
+            squid:S2077
+          </Link>
+        </div>
+      </div>
       <div
         className="display-flex-row flex-0"
       >
@@ -1303,11 +1359,39 @@ exports[`should render correctly: assignee without name 1`] = `
     <div
       className="huge-spacer-bottom display-flex-space-between"
     >
-      <strong
-        className="big big-spacer-right"
+      <div
+        className="display-flex-column"
       >
-        '3' is a magic number.
-      </strong>
+        <strong
+          className="big big-spacer-right little-spacer-bottom"
+        >
+          '3' is a magic number.
+        </strong>
+        <div>
+          <span
+            className="note padded-right"
+          >
+            That rule
+          </span>
+          <Link
+            className="small"
+            onlyActiveOnIndex={false}
+            style={Object {}}
+            target="_blank"
+            to={
+              Object {
+                "pathname": "/coding_rules",
+                "query": Object {
+                  "open": "squid:S2077",
+                  "rule_key": "squid:S2077",
+                },
+              }
+            }
+          >
+            squid:S2077
+          </Link>
+        </div>
+      </div>
       <div
         className="display-flex-row flex-0"
       >
@@ -1949,11 +2033,39 @@ exports[`should render correctly: deleted assignee 1`] = `
     <div
       className="huge-spacer-bottom display-flex-space-between"
     >
-      <strong
-        className="big big-spacer-right"
+      <div
+        className="display-flex-column"
       >
-        '3' is a magic number.
-      </strong>
+        <strong
+          className="big big-spacer-right little-spacer-bottom"
+        >
+          '3' is a magic number.
+        </strong>
+        <div>
+          <span
+            className="note padded-right"
+          >
+            That rule
+          </span>
+          <Link
+            className="small"
+            onlyActiveOnIndex={false}
+            style={Object {}}
+            target="_blank"
+            to={
+              Object {
+                "pathname": "/coding_rules",
+                "query": Object {
+                  "open": "squid:S2077",
+                  "rule_key": "squid:S2077",
+                },
+              }
+            }
+          >
+            squid:S2077
+          </Link>
+        </div>
+      </div>
       <div
         className="display-flex-row flex-0"
       >
@@ -2602,11 +2714,39 @@ exports[`should render correctly: unassigned 1`] = `
     <div
       className="huge-spacer-bottom display-flex-space-between"
     >
-      <strong
-        className="big big-spacer-right"
+      <div
+        className="display-flex-column"
       >
-        '3' is a magic number.
-      </strong>
+        <strong
+          className="big big-spacer-right little-spacer-bottom"
+        >
+          '3' is a magic number.
+        </strong>
+        <div>
+          <span
+            className="note padded-right"
+          >
+            That rule
+          </span>
+          <Link
+            className="small"
+            onlyActiveOnIndex={false}
+            style={Object {}}
+            target="_blank"
+            to={
+              Object {
+                "pathname": "/coding_rules",
+                "query": Object {
+                  "open": "squid:S2077",
+                  "rule_key": "squid:S2077",
+                },
+              }
+            }
+          >
+            squid:S2077
+          </Link>
+        </div>
+      </div>
       <div
         className="display-flex-row flex-0"
       >