SONAR-12718 Revamp hotspot information layout

diff --git a/server/sonar-web/src/main/js/app/styles/init/misc.css b/server/sonar-web/src/main/js/app/styles/init/misc.css
index 9a8ffd44fd9fbb4c3a64020db894234e4ca77798..d6ec455fff589862b6fff06ddb1b10434e3d6b0d 100644 (file)
--- a/server/sonar-web/src/main/js/app/styles/init/misc.css
+++ b/server/sonar-web/src/main/js/app/styles/init/misc.css
@@ -440,6 +440,10 @@ th.huge-spacer-right {
   flex: 1;
 }
 
+.flex-1-0-auto {
+  flex: 1 0 auto;
+}
+
 .flex-0 {
   flex: 0 0 auto;
 }

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx
index c2dd2b36d9a754d980638a2e3aea3fa3db4dfc65..500bb56e0b00b241c8bf04c32ce5a30d8808c197 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx
@@ -119,7 +119,7 @@ export default class HotspotList extends React.Component<Props, State> {
           {groupedHotspots.map(riskGroup => (
             <li className="big-spacer-bottom" key={riskGroup.risk}>
               <div className="hotspot-risk-header little-spacer-left">
-                <span>{translate('hotspots.risk_exposure')}</span>
+                <span>{translate('hotspots.risk_exposure')}:</span>
                 <div className={classNames('hotspot-risk-badge', 'spacer-left', riskGroup.risk)}>
                   {translate('risk_exposure', riskGroup.risk)}
                 </div>

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewer.css b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewer.css
new file mode 100644 (file)
index 0000000..737f6af
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewer.css
@@ -0,0 +1,27 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2020 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+.hotspot-information {
+  flex-basis: 320px;
+}
+
+.hotspot-information > div > span {
+  flex-basis: 100px;
+}

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerRenderer.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerRenderer.tsx
index 9fa56f161e979514e9e96b4cd2c02e992de03778..0730dd96b4894eaf86b75f95ed8f80f9fade15d0 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerRenderer.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import * as classNames from 'classnames';
 import * as React from 'react';
 import { ClipboardButton } from 'sonar-ui-common/components/controls/clipboard';
 import LinkIcon from 'sonar-ui-common/components/icons/LinkIcon';
@@ -29,6 +30,7 @@ import { BranchLike } from '../../../types/branch-like';
 import { Hotspot } from '../../../types/security-hotspots';
 import Assignee from './assignee/Assignee';
 import HotspotSnippetContainer from './HotspotSnippetContainer';
+import './HotspotViewer.css';
 import HotspotViewerTabs from './HotspotViewerTabs';
 import Status from './status/Status';
 
@@ -56,25 +58,44 @@ export default function HotspotViewerRenderer(props: HotspotViewerRendererProps)
     <DeferredSpinner loading={loading}>
       {hotspot && (
         <div className="big-padded">
-          <div className="big-spacer-bottom">
-            <div className="display-flex-space-between">
-              <strong className="big">{hotspot.message}</strong>
-              <ClipboardButton copyValue={permalink}>
-                <LinkIcon className="spacer-right" />
-                <span>{translate('hotspots.get_permalink')}</span>
-              </ClipboardButton>
+          <div className="huge-spacer-bottom display-flex-space-between">
+            <strong className="big big-spacer-right">{hotspot.message}</strong>
+            <ClipboardButton copyValue={permalink}>
+              <LinkIcon className="spacer-right" />
+              <span>{translate('hotspots.get_permalink')}</span>
+            </ClipboardButton>
+          </div>
+
+          <div className="huge-spacer-bottom display-flex-row">
+            <div className="hotspot-information display-flex-column display-flex-space-between">
+              <div className="display-flex-center">
+                <span className="big-spacer-right">{translate('category')}</span>
+                <strong className="nowrap">
+                  {securityCategories[hotspot.rule.securityCategory].title}
+                </strong>
+              </div>
+              <div className="display-flex-center">
+                <span className="big-spacer-right">{translate('hotspots.risk_exposure')}</span>
+                <div
+                  className={classNames(
+                    'hotspot-risk-badge',
+                    hotspot.rule.vulnerabilityProbability
+                  )}>
+                  {translate('risk_exposure', hotspot.rule.vulnerabilityProbability)}
+                </div>
+              </div>
+              <div className="display-flex-center">
+                <span className="big-spacer-right">{translate('assignee')}</span>
+                <div>
+                  <Assignee hotspot={hotspot} onAssigneeChange={props.onUpdateHotspot} />
+                </div>
+              </div>
             </div>
-            <div className="text-muted">
-              <span>{translate('category')}:</span>
-              <span className="little-spacer-left">
-                {securityCategories[hotspot.rule.securityCategory].title}
-              </span>
+            <div className="huge-spacer-left">
+              <Status hotspot={hotspot} onStatusChange={props.onUpdateHotspot} />
             </div>
           </div>
-          <div className="display-flex-row huge-spacer-bottom">
-            <Assignee hotspot={hotspot} onAssigneeChange={props.onUpdateHotspot} />
-            <Status hotspot={hotspot} onStatusChange={props.onUpdateHotspot} />
-          </div>
+
           <HotspotSnippetContainer branchLike={branchLike} hotspot={hotspot} />
           <HotspotViewerTabs hotspot={hotspot} onUpdateHotspot={props.onUpdateHotspot} />
         </div>

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotList-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotList-test.tsx.snap
index c7ddd11be7dc65b2fc6e8e0131c2b38ad733b02b..897a9ae03e783b253a125307257b2f4fa2d051ea 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotList-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotList-test.tsx.snap
@@ -92,6 +92,7 @@ exports[`should render correctly with hotspots: no pagination 1`] = `
       >
         <span>
           hotspots.risk_exposure
+          :
         </span>
         <div
           className="hotspot-risk-badge spacer-left HIGH"
@@ -205,6 +206,7 @@ exports[`should render correctly with hotspots: no pagination 1`] = `
       >
         <span>
           hotspots.risk_exposure
+          :
         </span>
         <div
           className="hotspot-risk-badge spacer-left MEDIUM"
@@ -357,6 +359,7 @@ exports[`should render correctly with hotspots: pagination 1`] = `
       >
         <span>
           hotspots.risk_exposure
+          :
         </span>
         <div
           className="hotspot-risk-badge spacer-left HIGH"
@@ -470,6 +473,7 @@ exports[`should render correctly with hotspots: pagination 1`] = `
       >
         <span>
           hotspots.risk_exposure
+          :
         </span>
         <div
           className="hotspot-risk-badge spacer-left MEDIUM"

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotViewerRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotViewerRenderer-test.tsx.snap
index 5f829d2c31f0ec8bf805184311247647d8b3fca7..7ab41bd333dd546e67eb521396b63db6b968a818 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotViewerRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotViewerRenderer-test.tsx.snap
@@ -9,248 +9,278 @@ exports[`should render correctly 1`] = `
     className="big-padded"
   >
     <div
-      className="big-spacer-bottom"
+      className="huge-spacer-bottom display-flex-space-between"
     >
-      <div
-        className="display-flex-space-between"
+      <strong
+        className="big big-spacer-right"
       >
-        <strong
-          className="big"
-        >
-          '3' is a magic number.
-        </strong>
-        <ClipboardButton
-          copyValue="http://localhost/security_hotspots?id=my-project&branch=branch-6.7&hotspots=01fc972e-2a3c-433e-bcae-0bd7f88f5123"
-        >
-          <LinkIcon
-            className="spacer-right"
-          />
-          <span>
-            hotspots.get_permalink
-          </span>
-        </ClipboardButton>
-      </div>
-      <div
-        className="text-muted"
+        '3' is a magic number.
+      </strong>
+      <ClipboardButton
+        copyValue="http://localhost/security_hotspots?id=my-project&branch=branch-6.7&hotspots=01fc972e-2a3c-433e-bcae-0bd7f88f5123"
       >
+        <LinkIcon
+          className="spacer-right"
+        />
         <span>
-          category
-          :
-        </span>
-        <span
-          className="little-spacer-left"
-        >
-          SQL injection
+          hotspots.get_permalink
         </span>
-      </div>
+      </ClipboardButton>
     </div>
     <div
-      className="display-flex-row huge-spacer-bottom"
+      className="huge-spacer-bottom display-flex-row"
     >
-      <Connect(withCurrentUser(Assignee))
-        hotspot={
-          Object {
-            "assignee": "assignee",
-            "assigneeUser": Object {
-              "active": true,
-              "local": true,
-              "login": "assignee",
-              "name": "John Doe",
-            },
-            "author": "author",
-            "authorUser": Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-            "canChangeStatus": true,
-            "changelog": Array [],
-            "comment": Array [],
-            "component": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "FIL",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            },
-            "creationDate": "2013-05-13T17:55:41+0200",
-            "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-            "line": 142,
-            "message": "'3' is a magic number.",
-            "project": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
+      <div
+        className="hotspot-information display-flex-column display-flex-space-between"
+      >
+        <div
+          className="display-flex-center"
+        >
+          <span
+            className="big-spacer-right"
+          >
+            category
+          </span>
+          <strong
+            className="nowrap"
+          >
+            SQL injection
+          </strong>
+        </div>
+        <div
+          className="display-flex-center"
+        >
+          <span
+            className="big-spacer-right"
+          >
+            hotspots.risk_exposure
+          </span>
+          <div
+            className="hotspot-risk-badge HIGH"
+          >
+            risk_exposure.HIGH
+          </div>
+        </div>
+        <div
+          className="display-flex-center"
+        >
+          <span
+            className="big-spacer-right"
+          >
+            assignee
+          </span>
+          <div>
+            <Connect(withCurrentUser(Assignee))
+              hotspot={
                 Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            },
-            "resolution": "FIXED",
-            "rule": Object {
-              "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-              "key": "squid:S2077",
-              "name": "That rule",
-              "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-              "securityCategory": "sql-injection",
-              "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-              "vulnerabilityProbability": "HIGH",
-            },
-            "status": "REVIEWED",
-            "textRange": Object {
-              "endLine": 142,
-              "endOffset": 83,
-              "startLine": 142,
-              "startOffset": 26,
-            },
-            "updateDate": "2013-05-13T17:55:42+0200",
-            "users": Array [
-              Object {
+                  "assignee": "assignee",
+                  "assigneeUser": Object {
+                    "active": true,
+                    "local": true,
+                    "login": "assignee",
+                    "name": "John Doe",
+                  },
+                  "author": "author",
+                  "authorUser": Object {
+                    "active": true,
+                    "local": true,
+                    "login": "author",
+                    "name": "John Doe",
+                  },
+                  "canChangeStatus": true,
+                  "changelog": Array [],
+                  "comment": Array [],
+                  "component": Object {
+                    "breadcrumbs": Array [],
+                    "key": "my-project",
+                    "name": "MyProject",
+                    "organization": "foo",
+                    "qualifier": "FIL",
+                    "qualityGate": Object {
+                      "isDefault": true,
+                      "key": "30",
+                      "name": "Sonar way",
+                    },
+                    "qualityProfiles": Array [
+                      Object {
+                        "deleted": false,
+                        "key": "my-qp",
+                        "language": "ts",
+                        "name": "Sonar way",
+                      },
+                    ],
+                    "tags": Array [],
+                  },
+                  "creationDate": "2013-05-13T17:55:41+0200",
+                  "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+                  "line": 142,
+                  "message": "'3' is a magic number.",
+                  "project": Object {
+                    "breadcrumbs": Array [],
+                    "key": "my-project",
+                    "name": "MyProject",
+                    "organization": "foo",
+                    "qualifier": "TRK",
+                    "qualityGate": Object {
+                      "isDefault": true,
+                      "key": "30",
+                      "name": "Sonar way",
+                    },
+                    "qualityProfiles": Array [
+                      Object {
+                        "deleted": false,
+                        "key": "my-qp",
+                        "language": "ts",
+                        "name": "Sonar way",
+                      },
+                    ],
+                    "tags": Array [],
+                  },
+                  "resolution": "FIXED",
+                  "rule": Object {
+                    "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                    "key": "squid:S2077",
+                    "name": "That rule",
+                    "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                    "securityCategory": "sql-injection",
+                    "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                    "vulnerabilityProbability": "HIGH",
+                  },
+                  "status": "REVIEWED",
+                  "textRange": Object {
+                    "endLine": 142,
+                    "endOffset": 83,
+                    "startLine": 142,
+                    "startOffset": 26,
+                  },
+                  "updateDate": "2013-05-13T17:55:42+0200",
+                  "users": Array [
+                    Object {
+                      "active": true,
+                      "local": true,
+                      "login": "assignee",
+                      "name": "John Doe",
+                    },
+                    Object {
+                      "active": true,
+                      "local": true,
+                      "login": "author",
+                      "name": "John Doe",
+                    },
+                  ],
+                }
+              }
+              onAssigneeChange={[MockFunction]}
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="huge-spacer-left"
+      >
+        <Connect(withCurrentUser(Status))
+          hotspot={
+            Object {
+              "assignee": "assignee",
+              "assigneeUser": Object {
                 "active": true,
                 "local": true,
                 "login": "assignee",
                 "name": "John Doe",
               },
-              Object {
+              "author": "author",
+              "authorUser": Object {
                 "active": true,
                 "local": true,
                 "login": "author",
                 "name": "John Doe",
               },
-            ],
-          }
-        }
-        onAssigneeChange={[MockFunction]}
-      />
-      <Connect(withCurrentUser(Status))
-        hotspot={
-          Object {
-            "assignee": "assignee",
-            "assigneeUser": Object {
-              "active": true,
-              "local": true,
-              "login": "assignee",
-              "name": "John Doe",
-            },
-            "author": "author",
-            "authorUser": Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-            "canChangeStatus": true,
-            "changelog": Array [],
-            "comment": Array [],
-            "component": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "FIL",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
+              "canChangeStatus": true,
+              "changelog": Array [],
+              "comment": Array [],
+              "component": Object {
+                "breadcrumbs": Array [],
+                "key": "my-project",
+                "name": "MyProject",
+                "organization": "foo",
+                "qualifier": "FIL",
+                "qualityGate": Object {
+                  "isDefault": true,
+                  "key": "30",
                   "name": "Sonar way",
                 },
-              ],
-              "tags": Array [],
-            },
-            "creationDate": "2013-05-13T17:55:41+0200",
-            "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-            "line": 142,
-            "message": "'3' is a magic number.",
-            "project": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
+                "qualityProfiles": Array [
+                  Object {
+                    "deleted": false,
+                    "key": "my-qp",
+                    "language": "ts",
+                    "name": "Sonar way",
+                  },
+                ],
+                "tags": Array [],
               },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
+              "creationDate": "2013-05-13T17:55:41+0200",
+              "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+              "line": 142,
+              "message": "'3' is a magic number.",
+              "project": Object {
+                "breadcrumbs": Array [],
+                "key": "my-project",
+                "name": "MyProject",
+                "organization": "foo",
+                "qualifier": "TRK",
+                "qualityGate": Object {
+                  "isDefault": true,
+                  "key": "30",
                   "name": "Sonar way",
                 },
-              ],
-              "tags": Array [],
-            },
-            "resolution": "FIXED",
-            "rule": Object {
-              "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-              "key": "squid:S2077",
-              "name": "That rule",
-              "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-              "securityCategory": "sql-injection",
-              "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-              "vulnerabilityProbability": "HIGH",
-            },
-            "status": "REVIEWED",
-            "textRange": Object {
-              "endLine": 142,
-              "endOffset": 83,
-              "startLine": 142,
-              "startOffset": 26,
-            },
-            "updateDate": "2013-05-13T17:55:42+0200",
-            "users": Array [
-              Object {
-                "active": true,
-                "local": true,
-                "login": "assignee",
-                "name": "John Doe",
+                "qualityProfiles": Array [
+                  Object {
+                    "deleted": false,
+                    "key": "my-qp",
+                    "language": "ts",
+                    "name": "Sonar way",
+                  },
+                ],
+                "tags": Array [],
               },
-              Object {
-                "active": true,
-                "local": true,
-                "login": "author",
-                "name": "John Doe",
+              "resolution": "FIXED",
+              "rule": Object {
+                "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                "key": "squid:S2077",
+                "name": "That rule",
+                "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                "securityCategory": "sql-injection",
+                "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                "vulnerabilityProbability": "HIGH",
               },
-            ],
+              "status": "REVIEWED",
+              "textRange": Object {
+                "endLine": 142,
+                "endOffset": 83,
+                "startLine": 142,
+                "startOffset": 26,
+              },
+              "updateDate": "2013-05-13T17:55:42+0200",
+              "users": Array [
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "assignee",
+                  "name": "John Doe",
+                },
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "author",
+                  "name": "John Doe",
+                },
+              ],
+            }
           }
-        }
-        onStatusChange={[MockFunction]}
-      />
+          onStatusChange={[MockFunction]}
+        />
+      </div>
     </div>
     <HotspotSnippetContainer
       branchLike={
@@ -476,248 +506,278 @@ exports[`should render correctly: anonymous user 1`] = `
     className="big-padded"
   >
     <div
-      className="big-spacer-bottom"
+      className="huge-spacer-bottom display-flex-space-between"
     >
-      <div
-        className="display-flex-space-between"
+      <strong
+        className="big big-spacer-right"
       >
-        <strong
-          className="big"
-        >
-          '3' is a magic number.
-        </strong>
-        <ClipboardButton
-          copyValue="http://localhost/security_hotspots?id=my-project&branch=branch-6.7&hotspots=01fc972e-2a3c-433e-bcae-0bd7f88f5123"
-        >
-          <LinkIcon
-            className="spacer-right"
-          />
-          <span>
-            hotspots.get_permalink
-          </span>
-        </ClipboardButton>
-      </div>
-      <div
-        className="text-muted"
+        '3' is a magic number.
+      </strong>
+      <ClipboardButton
+        copyValue="http://localhost/security_hotspots?id=my-project&branch=branch-6.7&hotspots=01fc972e-2a3c-433e-bcae-0bd7f88f5123"
       >
+        <LinkIcon
+          className="spacer-right"
+        />
         <span>
-          category
-          :
-        </span>
-        <span
-          className="little-spacer-left"
-        >
-          SQL injection
+          hotspots.get_permalink
         </span>
-      </div>
+      </ClipboardButton>
     </div>
     <div
-      className="display-flex-row huge-spacer-bottom"
+      className="huge-spacer-bottom display-flex-row"
     >
-      <Connect(withCurrentUser(Assignee))
-        hotspot={
-          Object {
-            "assignee": "assignee",
-            "assigneeUser": Object {
-              "active": true,
-              "local": true,
-              "login": "assignee",
-              "name": "John Doe",
-            },
-            "author": "author",
-            "authorUser": Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-            "canChangeStatus": true,
-            "changelog": Array [],
-            "comment": Array [],
-            "component": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "FIL",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            },
-            "creationDate": "2013-05-13T17:55:41+0200",
-            "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-            "line": 142,
-            "message": "'3' is a magic number.",
-            "project": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
+      <div
+        className="hotspot-information display-flex-column display-flex-space-between"
+      >
+        <div
+          className="display-flex-center"
+        >
+          <span
+            className="big-spacer-right"
+          >
+            category
+          </span>
+          <strong
+            className="nowrap"
+          >
+            SQL injection
+          </strong>
+        </div>
+        <div
+          className="display-flex-center"
+        >
+          <span
+            className="big-spacer-right"
+          >
+            hotspots.risk_exposure
+          </span>
+          <div
+            className="hotspot-risk-badge HIGH"
+          >
+            risk_exposure.HIGH
+          </div>
+        </div>
+        <div
+          className="display-flex-center"
+        >
+          <span
+            className="big-spacer-right"
+          >
+            assignee
+          </span>
+          <div>
+            <Connect(withCurrentUser(Assignee))
+              hotspot={
                 Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            },
-            "resolution": "FIXED",
-            "rule": Object {
-              "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-              "key": "squid:S2077",
-              "name": "That rule",
-              "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-              "securityCategory": "sql-injection",
-              "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-              "vulnerabilityProbability": "HIGH",
-            },
-            "status": "REVIEWED",
-            "textRange": Object {
-              "endLine": 142,
-              "endOffset": 83,
-              "startLine": 142,
-              "startOffset": 26,
-            },
-            "updateDate": "2013-05-13T17:55:42+0200",
-            "users": Array [
-              Object {
+                  "assignee": "assignee",
+                  "assigneeUser": Object {
+                    "active": true,
+                    "local": true,
+                    "login": "assignee",
+                    "name": "John Doe",
+                  },
+                  "author": "author",
+                  "authorUser": Object {
+                    "active": true,
+                    "local": true,
+                    "login": "author",
+                    "name": "John Doe",
+                  },
+                  "canChangeStatus": true,
+                  "changelog": Array [],
+                  "comment": Array [],
+                  "component": Object {
+                    "breadcrumbs": Array [],
+                    "key": "my-project",
+                    "name": "MyProject",
+                    "organization": "foo",
+                    "qualifier": "FIL",
+                    "qualityGate": Object {
+                      "isDefault": true,
+                      "key": "30",
+                      "name": "Sonar way",
+                    },
+                    "qualityProfiles": Array [
+                      Object {
+                        "deleted": false,
+                        "key": "my-qp",
+                        "language": "ts",
+                        "name": "Sonar way",
+                      },
+                    ],
+                    "tags": Array [],
+                  },
+                  "creationDate": "2013-05-13T17:55:41+0200",
+                  "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+                  "line": 142,
+                  "message": "'3' is a magic number.",
+                  "project": Object {
+                    "breadcrumbs": Array [],
+                    "key": "my-project",
+                    "name": "MyProject",
+                    "organization": "foo",
+                    "qualifier": "TRK",
+                    "qualityGate": Object {
+                      "isDefault": true,
+                      "key": "30",
+                      "name": "Sonar way",
+                    },
+                    "qualityProfiles": Array [
+                      Object {
+                        "deleted": false,
+                        "key": "my-qp",
+                        "language": "ts",
+                        "name": "Sonar way",
+                      },
+                    ],
+                    "tags": Array [],
+                  },
+                  "resolution": "FIXED",
+                  "rule": Object {
+                    "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                    "key": "squid:S2077",
+                    "name": "That rule",
+                    "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                    "securityCategory": "sql-injection",
+                    "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                    "vulnerabilityProbability": "HIGH",
+                  },
+                  "status": "REVIEWED",
+                  "textRange": Object {
+                    "endLine": 142,
+                    "endOffset": 83,
+                    "startLine": 142,
+                    "startOffset": 26,
+                  },
+                  "updateDate": "2013-05-13T17:55:42+0200",
+                  "users": Array [
+                    Object {
+                      "active": true,
+                      "local": true,
+                      "login": "assignee",
+                      "name": "John Doe",
+                    },
+                    Object {
+                      "active": true,
+                      "local": true,
+                      "login": "author",
+                      "name": "John Doe",
+                    },
+                  ],
+                }
+              }
+              onAssigneeChange={[MockFunction]}
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="huge-spacer-left"
+      >
+        <Connect(withCurrentUser(Status))
+          hotspot={
+            Object {
+              "assignee": "assignee",
+              "assigneeUser": Object {
                 "active": true,
                 "local": true,
                 "login": "assignee",
                 "name": "John Doe",
               },
-              Object {
+              "author": "author",
+              "authorUser": Object {
                 "active": true,
                 "local": true,
                 "login": "author",
                 "name": "John Doe",
               },
-            ],
-          }
-        }
-        onAssigneeChange={[MockFunction]}
-      />
-      <Connect(withCurrentUser(Status))
-        hotspot={
-          Object {
-            "assignee": "assignee",
-            "assigneeUser": Object {
-              "active": true,
-              "local": true,
-              "login": "assignee",
-              "name": "John Doe",
-            },
-            "author": "author",
-            "authorUser": Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-            "canChangeStatus": true,
-            "changelog": Array [],
-            "comment": Array [],
-            "component": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "FIL",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
+              "canChangeStatus": true,
+              "changelog": Array [],
+              "comment": Array [],
+              "component": Object {
+                "breadcrumbs": Array [],
+                "key": "my-project",
+                "name": "MyProject",
+                "organization": "foo",
+                "qualifier": "FIL",
+                "qualityGate": Object {
+                  "isDefault": true,
+                  "key": "30",
                   "name": "Sonar way",
                 },
-              ],
-              "tags": Array [],
-            },
-            "creationDate": "2013-05-13T17:55:41+0200",
-            "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-            "line": 142,
-            "message": "'3' is a magic number.",
-            "project": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
+                "qualityProfiles": Array [
+                  Object {
+                    "deleted": false,
+                    "key": "my-qp",
+                    "language": "ts",
+                    "name": "Sonar way",
+                  },
+                ],
+                "tags": Array [],
               },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
+              "creationDate": "2013-05-13T17:55:41+0200",
+              "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+              "line": 142,
+              "message": "'3' is a magic number.",
+              "project": Object {
+                "breadcrumbs": Array [],
+                "key": "my-project",
+                "name": "MyProject",
+                "organization": "foo",
+                "qualifier": "TRK",
+                "qualityGate": Object {
+                  "isDefault": true,
+                  "key": "30",
                   "name": "Sonar way",
                 },
-              ],
-              "tags": Array [],
-            },
-            "resolution": "FIXED",
-            "rule": Object {
-              "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-              "key": "squid:S2077",
-              "name": "That rule",
-              "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-              "securityCategory": "sql-injection",
-              "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-              "vulnerabilityProbability": "HIGH",
-            },
-            "status": "REVIEWED",
-            "textRange": Object {
-              "endLine": 142,
-              "endOffset": 83,
-              "startLine": 142,
-              "startOffset": 26,
-            },
-            "updateDate": "2013-05-13T17:55:42+0200",
-            "users": Array [
-              Object {
-                "active": true,
-                "local": true,
-                "login": "assignee",
-                "name": "John Doe",
+                "qualityProfiles": Array [
+                  Object {
+                    "deleted": false,
+                    "key": "my-qp",
+                    "language": "ts",
+                    "name": "Sonar way",
+                  },
+                ],
+                "tags": Array [],
               },
-              Object {
-                "active": true,
-                "local": true,
-                "login": "author",
-                "name": "John Doe",
+              "resolution": "FIXED",
+              "rule": Object {
+                "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                "key": "squid:S2077",
+                "name": "That rule",
+                "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                "securityCategory": "sql-injection",
+                "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                "vulnerabilityProbability": "HIGH",
               },
-            ],
+              "status": "REVIEWED",
+              "textRange": Object {
+                "endLine": 142,
+                "endOffset": 83,
+                "startLine": 142,
+                "startOffset": 26,
+              },
+              "updateDate": "2013-05-13T17:55:42+0200",
+              "users": Array [
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "assignee",
+                  "name": "John Doe",
+                },
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "author",
+                  "name": "John Doe",
+                },
+              ],
+            }
           }
-        }
-        onStatusChange={[MockFunction]}
-      />
+          onStatusChange={[MockFunction]}
+        />
+      </div>
     </div>
     <HotspotSnippetContainer
       branchLike={
@@ -943,248 +1003,278 @@ exports[`should render correctly: assignee without name 1`] = `
     className="big-padded"
   >
     <div
-      className="big-spacer-bottom"
+      className="huge-spacer-bottom display-flex-space-between"
     >
-      <div
-        className="display-flex-space-between"
+      <strong
+        className="big big-spacer-right"
       >
-        <strong
-          className="big"
-        >
-          '3' is a magic number.
-        </strong>
-        <ClipboardButton
-          copyValue="http://localhost/security_hotspots?id=my-project&branch=branch-6.7&hotspots=01fc972e-2a3c-433e-bcae-0bd7f88f5123"
-        >
-          <LinkIcon
-            className="spacer-right"
-          />
-          <span>
-            hotspots.get_permalink
-          </span>
-        </ClipboardButton>
-      </div>
-      <div
-        className="text-muted"
+        '3' is a magic number.
+      </strong>
+      <ClipboardButton
+        copyValue="http://localhost/security_hotspots?id=my-project&branch=branch-6.7&hotspots=01fc972e-2a3c-433e-bcae-0bd7f88f5123"
       >
+        <LinkIcon
+          className="spacer-right"
+        />
         <span>
-          category
-          :
+          hotspots.get_permalink
         </span>
-        <span
-          className="little-spacer-left"
-        >
-          SQL injection
-        </span>
-      </div>
+      </ClipboardButton>
     </div>
     <div
-      className="display-flex-row huge-spacer-bottom"
+      className="huge-spacer-bottom display-flex-row"
     >
-      <Connect(withCurrentUser(Assignee))
-        hotspot={
-          Object {
-            "assignee": "assignee",
-            "assigneeUser": Object {
-              "active": true,
-              "local": true,
-              "login": "assignee_login",
-              "name": undefined,
-            },
-            "author": "author",
-            "authorUser": Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-            "canChangeStatus": true,
-            "changelog": Array [],
-            "comment": Array [],
-            "component": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "FIL",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            },
-            "creationDate": "2013-05-13T17:55:41+0200",
-            "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-            "line": 142,
-            "message": "'3' is a magic number.",
-            "project": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
+      <div
+        className="hotspot-information display-flex-column display-flex-space-between"
+      >
+        <div
+          className="display-flex-center"
+        >
+          <span
+            className="big-spacer-right"
+          >
+            category
+          </span>
+          <strong
+            className="nowrap"
+          >
+            SQL injection
+          </strong>
+        </div>
+        <div
+          className="display-flex-center"
+        >
+          <span
+            className="big-spacer-right"
+          >
+            hotspots.risk_exposure
+          </span>
+          <div
+            className="hotspot-risk-badge HIGH"
+          >
+            risk_exposure.HIGH
+          </div>
+        </div>
+        <div
+          className="display-flex-center"
+        >
+          <span
+            className="big-spacer-right"
+          >
+            assignee
+          </span>
+          <div>
+            <Connect(withCurrentUser(Assignee))
+              hotspot={
                 Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            },
-            "resolution": "FIXED",
-            "rule": Object {
-              "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-              "key": "squid:S2077",
-              "name": "That rule",
-              "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-              "securityCategory": "sql-injection",
-              "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-              "vulnerabilityProbability": "HIGH",
-            },
-            "status": "REVIEWED",
-            "textRange": Object {
-              "endLine": 142,
-              "endOffset": 83,
-              "startLine": 142,
-              "startOffset": 26,
-            },
-            "updateDate": "2013-05-13T17:55:42+0200",
-            "users": Array [
-              Object {
+                  "assignee": "assignee",
+                  "assigneeUser": Object {
+                    "active": true,
+                    "local": true,
+                    "login": "assignee_login",
+                    "name": undefined,
+                  },
+                  "author": "author",
+                  "authorUser": Object {
+                    "active": true,
+                    "local": true,
+                    "login": "author",
+                    "name": "John Doe",
+                  },
+                  "canChangeStatus": true,
+                  "changelog": Array [],
+                  "comment": Array [],
+                  "component": Object {
+                    "breadcrumbs": Array [],
+                    "key": "my-project",
+                    "name": "MyProject",
+                    "organization": "foo",
+                    "qualifier": "FIL",
+                    "qualityGate": Object {
+                      "isDefault": true,
+                      "key": "30",
+                      "name": "Sonar way",
+                    },
+                    "qualityProfiles": Array [
+                      Object {
+                        "deleted": false,
+                        "key": "my-qp",
+                        "language": "ts",
+                        "name": "Sonar way",
+                      },
+                    ],
+                    "tags": Array [],
+                  },
+                  "creationDate": "2013-05-13T17:55:41+0200",
+                  "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+                  "line": 142,
+                  "message": "'3' is a magic number.",
+                  "project": Object {
+                    "breadcrumbs": Array [],
+                    "key": "my-project",
+                    "name": "MyProject",
+                    "organization": "foo",
+                    "qualifier": "TRK",
+                    "qualityGate": Object {
+                      "isDefault": true,
+                      "key": "30",
+                      "name": "Sonar way",
+                    },
+                    "qualityProfiles": Array [
+                      Object {
+                        "deleted": false,
+                        "key": "my-qp",
+                        "language": "ts",
+                        "name": "Sonar way",
+                      },
+                    ],
+                    "tags": Array [],
+                  },
+                  "resolution": "FIXED",
+                  "rule": Object {
+                    "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                    "key": "squid:S2077",
+                    "name": "That rule",
+                    "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                    "securityCategory": "sql-injection",
+                    "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                    "vulnerabilityProbability": "HIGH",
+                  },
+                  "status": "REVIEWED",
+                  "textRange": Object {
+                    "endLine": 142,
+                    "endOffset": 83,
+                    "startLine": 142,
+                    "startOffset": 26,
+                  },
+                  "updateDate": "2013-05-13T17:55:42+0200",
+                  "users": Array [
+                    Object {
+                      "active": true,
+                      "local": true,
+                      "login": "assignee",
+                      "name": "John Doe",
+                    },
+                    Object {
+                      "active": true,
+                      "local": true,
+                      "login": "author",
+                      "name": "John Doe",
+                    },
+                  ],
+                }
+              }
+              onAssigneeChange={[MockFunction]}
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="huge-spacer-left"
+      >
+        <Connect(withCurrentUser(Status))
+          hotspot={
+            Object {
+              "assignee": "assignee",
+              "assigneeUser": Object {
                 "active": true,
                 "local": true,
-                "login": "assignee",
-                "name": "John Doe",
+                "login": "assignee_login",
+                "name": undefined,
               },
-              Object {
+              "author": "author",
+              "authorUser": Object {
                 "active": true,
                 "local": true,
                 "login": "author",
                 "name": "John Doe",
               },
-            ],
-          }
-        }
-        onAssigneeChange={[MockFunction]}
-      />
-      <Connect(withCurrentUser(Status))
-        hotspot={
-          Object {
-            "assignee": "assignee",
-            "assigneeUser": Object {
-              "active": true,
-              "local": true,
-              "login": "assignee_login",
-              "name": undefined,
-            },
-            "author": "author",
-            "authorUser": Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-            "canChangeStatus": true,
-            "changelog": Array [],
-            "comment": Array [],
-            "component": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "FIL",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
+              "canChangeStatus": true,
+              "changelog": Array [],
+              "comment": Array [],
+              "component": Object {
+                "breadcrumbs": Array [],
+                "key": "my-project",
+                "name": "MyProject",
+                "organization": "foo",
+                "qualifier": "FIL",
+                "qualityGate": Object {
+                  "isDefault": true,
+                  "key": "30",
                   "name": "Sonar way",
                 },
-              ],
-              "tags": Array [],
-            },
-            "creationDate": "2013-05-13T17:55:41+0200",
-            "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-            "line": 142,
-            "message": "'3' is a magic number.",
-            "project": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
+                "qualityProfiles": Array [
+                  Object {
+                    "deleted": false,
+                    "key": "my-qp",
+                    "language": "ts",
+                    "name": "Sonar way",
+                  },
+                ],
+                "tags": Array [],
               },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
+              "creationDate": "2013-05-13T17:55:41+0200",
+              "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+              "line": 142,
+              "message": "'3' is a magic number.",
+              "project": Object {
+                "breadcrumbs": Array [],
+                "key": "my-project",
+                "name": "MyProject",
+                "organization": "foo",
+                "qualifier": "TRK",
+                "qualityGate": Object {
+                  "isDefault": true,
+                  "key": "30",
                   "name": "Sonar way",
                 },
-              ],
-              "tags": Array [],
-            },
-            "resolution": "FIXED",
-            "rule": Object {
-              "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-              "key": "squid:S2077",
-              "name": "That rule",
-              "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-              "securityCategory": "sql-injection",
-              "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-              "vulnerabilityProbability": "HIGH",
-            },
-            "status": "REVIEWED",
-            "textRange": Object {
-              "endLine": 142,
-              "endOffset": 83,
-              "startLine": 142,
-              "startOffset": 26,
-            },
-            "updateDate": "2013-05-13T17:55:42+0200",
-            "users": Array [
-              Object {
-                "active": true,
-                "local": true,
-                "login": "assignee",
-                "name": "John Doe",
+                "qualityProfiles": Array [
+                  Object {
+                    "deleted": false,
+                    "key": "my-qp",
+                    "language": "ts",
+                    "name": "Sonar way",
+                  },
+                ],
+                "tags": Array [],
               },
-              Object {
-                "active": true,
-                "local": true,
-                "login": "author",
-                "name": "John Doe",
+              "resolution": "FIXED",
+              "rule": Object {
+                "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                "key": "squid:S2077",
+                "name": "That rule",
+                "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                "securityCategory": "sql-injection",
+                "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                "vulnerabilityProbability": "HIGH",
               },
-            ],
+              "status": "REVIEWED",
+              "textRange": Object {
+                "endLine": 142,
+                "endOffset": 83,
+                "startLine": 142,
+                "startOffset": 26,
+              },
+              "updateDate": "2013-05-13T17:55:42+0200",
+              "users": Array [
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "assignee",
+                  "name": "John Doe",
+                },
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "author",
+                  "name": "John Doe",
+                },
+              ],
+            }
           }
-        }
-        onStatusChange={[MockFunction]}
-      />
+          onStatusChange={[MockFunction]}
+        />
+      </div>
     </div>
     <HotspotSnippetContainer
       branchLike={
@@ -1410,248 +1500,278 @@ exports[`should render correctly: deleted assignee 1`] = `
     className="big-padded"
   >
     <div
-      className="big-spacer-bottom"
+      className="huge-spacer-bottom display-flex-space-between"
     >
-      <div
-        className="display-flex-space-between"
+      <strong
+        className="big big-spacer-right"
       >
-        <strong
-          className="big"
-        >
-          '3' is a magic number.
-        </strong>
-        <ClipboardButton
-          copyValue="http://localhost/security_hotspots?id=my-project&branch=branch-6.7&hotspots=01fc972e-2a3c-433e-bcae-0bd7f88f5123"
-        >
-          <LinkIcon
-            className="spacer-right"
-          />
-          <span>
-            hotspots.get_permalink
-          </span>
-        </ClipboardButton>
-      </div>
-      <div
-        className="text-muted"
+        '3' is a magic number.
+      </strong>
+      <ClipboardButton
+        copyValue="http://localhost/security_hotspots?id=my-project&branch=branch-6.7&hotspots=01fc972e-2a3c-433e-bcae-0bd7f88f5123"
       >
+        <LinkIcon
+          className="spacer-right"
+        />
         <span>
-          category
-          :
-        </span>
-        <span
-          className="little-spacer-left"
-        >
-          SQL injection
+          hotspots.get_permalink
         </span>
-      </div>
+      </ClipboardButton>
     </div>
     <div
-      className="display-flex-row huge-spacer-bottom"
+      className="huge-spacer-bottom display-flex-row"
     >
-      <Connect(withCurrentUser(Assignee))
-        hotspot={
-          Object {
-            "assignee": "assignee",
-            "assigneeUser": Object {
-              "active": false,
-              "local": true,
-              "login": "john.doe",
-              "name": "John Doe",
-            },
-            "author": "author",
-            "authorUser": Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-            "canChangeStatus": true,
-            "changelog": Array [],
-            "comment": Array [],
-            "component": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "FIL",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            },
-            "creationDate": "2013-05-13T17:55:41+0200",
-            "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-            "line": 142,
-            "message": "'3' is a magic number.",
-            "project": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
+      <div
+        className="hotspot-information display-flex-column display-flex-space-between"
+      >
+        <div
+          className="display-flex-center"
+        >
+          <span
+            className="big-spacer-right"
+          >
+            category
+          </span>
+          <strong
+            className="nowrap"
+          >
+            SQL injection
+          </strong>
+        </div>
+        <div
+          className="display-flex-center"
+        >
+          <span
+            className="big-spacer-right"
+          >
+            hotspots.risk_exposure
+          </span>
+          <div
+            className="hotspot-risk-badge HIGH"
+          >
+            risk_exposure.HIGH
+          </div>
+        </div>
+        <div
+          className="display-flex-center"
+        >
+          <span
+            className="big-spacer-right"
+          >
+            assignee
+          </span>
+          <div>
+            <Connect(withCurrentUser(Assignee))
+              hotspot={
                 Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            },
-            "resolution": "FIXED",
-            "rule": Object {
-              "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-              "key": "squid:S2077",
-              "name": "That rule",
-              "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-              "securityCategory": "sql-injection",
-              "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-              "vulnerabilityProbability": "HIGH",
-            },
-            "status": "REVIEWED",
-            "textRange": Object {
-              "endLine": 142,
-              "endOffset": 83,
-              "startLine": 142,
-              "startOffset": 26,
-            },
-            "updateDate": "2013-05-13T17:55:42+0200",
-            "users": Array [
-              Object {
-                "active": true,
+                  "assignee": "assignee",
+                  "assigneeUser": Object {
+                    "active": false,
+                    "local": true,
+                    "login": "john.doe",
+                    "name": "John Doe",
+                  },
+                  "author": "author",
+                  "authorUser": Object {
+                    "active": true,
+                    "local": true,
+                    "login": "author",
+                    "name": "John Doe",
+                  },
+                  "canChangeStatus": true,
+                  "changelog": Array [],
+                  "comment": Array [],
+                  "component": Object {
+                    "breadcrumbs": Array [],
+                    "key": "my-project",
+                    "name": "MyProject",
+                    "organization": "foo",
+                    "qualifier": "FIL",
+                    "qualityGate": Object {
+                      "isDefault": true,
+                      "key": "30",
+                      "name": "Sonar way",
+                    },
+                    "qualityProfiles": Array [
+                      Object {
+                        "deleted": false,
+                        "key": "my-qp",
+                        "language": "ts",
+                        "name": "Sonar way",
+                      },
+                    ],
+                    "tags": Array [],
+                  },
+                  "creationDate": "2013-05-13T17:55:41+0200",
+                  "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+                  "line": 142,
+                  "message": "'3' is a magic number.",
+                  "project": Object {
+                    "breadcrumbs": Array [],
+                    "key": "my-project",
+                    "name": "MyProject",
+                    "organization": "foo",
+                    "qualifier": "TRK",
+                    "qualityGate": Object {
+                      "isDefault": true,
+                      "key": "30",
+                      "name": "Sonar way",
+                    },
+                    "qualityProfiles": Array [
+                      Object {
+                        "deleted": false,
+                        "key": "my-qp",
+                        "language": "ts",
+                        "name": "Sonar way",
+                      },
+                    ],
+                    "tags": Array [],
+                  },
+                  "resolution": "FIXED",
+                  "rule": Object {
+                    "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                    "key": "squid:S2077",
+                    "name": "That rule",
+                    "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                    "securityCategory": "sql-injection",
+                    "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                    "vulnerabilityProbability": "HIGH",
+                  },
+                  "status": "REVIEWED",
+                  "textRange": Object {
+                    "endLine": 142,
+                    "endOffset": 83,
+                    "startLine": 142,
+                    "startOffset": 26,
+                  },
+                  "updateDate": "2013-05-13T17:55:42+0200",
+                  "users": Array [
+                    Object {
+                      "active": true,
+                      "local": true,
+                      "login": "assignee",
+                      "name": "John Doe",
+                    },
+                    Object {
+                      "active": true,
+                      "local": true,
+                      "login": "author",
+                      "name": "John Doe",
+                    },
+                  ],
+                }
+              }
+              onAssigneeChange={[MockFunction]}
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="huge-spacer-left"
+      >
+        <Connect(withCurrentUser(Status))
+          hotspot={
+            Object {
+              "assignee": "assignee",
+              "assigneeUser": Object {
+                "active": false,
                 "local": true,
-                "login": "assignee",
+                "login": "john.doe",
                 "name": "John Doe",
               },
-              Object {
+              "author": "author",
+              "authorUser": Object {
                 "active": true,
                 "local": true,
                 "login": "author",
                 "name": "John Doe",
               },
-            ],
-          }
-        }
-        onAssigneeChange={[MockFunction]}
-      />
-      <Connect(withCurrentUser(Status))
-        hotspot={
-          Object {
-            "assignee": "assignee",
-            "assigneeUser": Object {
-              "active": false,
-              "local": true,
-              "login": "john.doe",
-              "name": "John Doe",
-            },
-            "author": "author",
-            "authorUser": Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-            "canChangeStatus": true,
-            "changelog": Array [],
-            "comment": Array [],
-            "component": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "FIL",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
+              "canChangeStatus": true,
+              "changelog": Array [],
+              "comment": Array [],
+              "component": Object {
+                "breadcrumbs": Array [],
+                "key": "my-project",
+                "name": "MyProject",
+                "organization": "foo",
+                "qualifier": "FIL",
+                "qualityGate": Object {
+                  "isDefault": true,
+                  "key": "30",
                   "name": "Sonar way",
                 },
-              ],
-              "tags": Array [],
-            },
-            "creationDate": "2013-05-13T17:55:41+0200",
-            "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-            "line": 142,
-            "message": "'3' is a magic number.",
-            "project": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
+                "qualityProfiles": Array [
+                  Object {
+                    "deleted": false,
+                    "key": "my-qp",
+                    "language": "ts",
+                    "name": "Sonar way",
+                  },
+                ],
+                "tags": Array [],
               },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
+              "creationDate": "2013-05-13T17:55:41+0200",
+              "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+              "line": 142,
+              "message": "'3' is a magic number.",
+              "project": Object {
+                "breadcrumbs": Array [],
+                "key": "my-project",
+                "name": "MyProject",
+                "organization": "foo",
+                "qualifier": "TRK",
+                "qualityGate": Object {
+                  "isDefault": true,
+                  "key": "30",
                   "name": "Sonar way",
                 },
-              ],
-              "tags": Array [],
-            },
-            "resolution": "FIXED",
-            "rule": Object {
-              "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-              "key": "squid:S2077",
-              "name": "That rule",
-              "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-              "securityCategory": "sql-injection",
-              "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-              "vulnerabilityProbability": "HIGH",
-            },
-            "status": "REVIEWED",
-            "textRange": Object {
-              "endLine": 142,
-              "endOffset": 83,
-              "startLine": 142,
-              "startOffset": 26,
-            },
-            "updateDate": "2013-05-13T17:55:42+0200",
-            "users": Array [
-              Object {
-                "active": true,
-                "local": true,
-                "login": "assignee",
-                "name": "John Doe",
+                "qualityProfiles": Array [
+                  Object {
+                    "deleted": false,
+                    "key": "my-qp",
+                    "language": "ts",
+                    "name": "Sonar way",
+                  },
+                ],
+                "tags": Array [],
               },
-              Object {
-                "active": true,
-                "local": true,
-                "login": "author",
-                "name": "John Doe",
+              "resolution": "FIXED",
+              "rule": Object {
+                "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                "key": "squid:S2077",
+                "name": "That rule",
+                "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                "securityCategory": "sql-injection",
+                "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                "vulnerabilityProbability": "HIGH",
               },
-            ],
+              "status": "REVIEWED",
+              "textRange": Object {
+                "endLine": 142,
+                "endOffset": 83,
+                "startLine": 142,
+                "startOffset": 26,
+              },
+              "updateDate": "2013-05-13T17:55:42+0200",
+              "users": Array [
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "assignee",
+                  "name": "John Doe",
+                },
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "author",
+                  "name": "John Doe",
+                },
+              ],
+            }
           }
-        }
-        onStatusChange={[MockFunction]}
-      />
+          onStatusChange={[MockFunction]}
+        />
+      </div>
     </div>
     <HotspotSnippetContainer
       branchLike={
@@ -1884,248 +2004,278 @@ exports[`should render correctly: unassigned 1`] = `
     className="big-padded"
   >
     <div
-      className="big-spacer-bottom"
+      className="huge-spacer-bottom display-flex-space-between"
     >
-      <div
-        className="display-flex-space-between"
+      <strong
+        className="big big-spacer-right"
       >
-        <strong
-          className="big"
-        >
-          '3' is a magic number.
-        </strong>
-        <ClipboardButton
-          copyValue="http://localhost/security_hotspots?id=my-project&branch=branch-6.7&hotspots=01fc972e-2a3c-433e-bcae-0bd7f88f5123"
-        >
-          <LinkIcon
-            className="spacer-right"
-          />
-          <span>
-            hotspots.get_permalink
-          </span>
-        </ClipboardButton>
-      </div>
-      <div
-        className="text-muted"
+        '3' is a magic number.
+      </strong>
+      <ClipboardButton
+        copyValue="http://localhost/security_hotspots?id=my-project&branch=branch-6.7&hotspots=01fc972e-2a3c-433e-bcae-0bd7f88f5123"
       >
+        <LinkIcon
+          className="spacer-right"
+        />
         <span>
-          category
-          :
-        </span>
-        <span
-          className="little-spacer-left"
-        >
-          SQL injection
+          hotspots.get_permalink
         </span>
-      </div>
+      </ClipboardButton>
     </div>
     <div
-      className="display-flex-row huge-spacer-bottom"
+      className="huge-spacer-bottom display-flex-row"
     >
-      <Connect(withCurrentUser(Assignee))
-        hotspot={
-          Object {
-            "assignee": undefined,
-            "assigneeUser": Object {
-              "active": true,
-              "local": true,
-              "login": "assignee",
-              "name": "John Doe",
-            },
-            "author": "author",
-            "authorUser": Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-            "canChangeStatus": true,
-            "changelog": Array [],
-            "comment": Array [],
-            "component": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "FIL",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            },
-            "creationDate": "2013-05-13T17:55:41+0200",
-            "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-            "line": 142,
-            "message": "'3' is a magic number.",
-            "project": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
+      <div
+        className="hotspot-information display-flex-column display-flex-space-between"
+      >
+        <div
+          className="display-flex-center"
+        >
+          <span
+            className="big-spacer-right"
+          >
+            category
+          </span>
+          <strong
+            className="nowrap"
+          >
+            SQL injection
+          </strong>
+        </div>
+        <div
+          className="display-flex-center"
+        >
+          <span
+            className="big-spacer-right"
+          >
+            hotspots.risk_exposure
+          </span>
+          <div
+            className="hotspot-risk-badge HIGH"
+          >
+            risk_exposure.HIGH
+          </div>
+        </div>
+        <div
+          className="display-flex-center"
+        >
+          <span
+            className="big-spacer-right"
+          >
+            assignee
+          </span>
+          <div>
+            <Connect(withCurrentUser(Assignee))
+              hotspot={
                 Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            },
-            "resolution": "FIXED",
-            "rule": Object {
-              "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-              "key": "squid:S2077",
-              "name": "That rule",
-              "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-              "securityCategory": "sql-injection",
-              "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-              "vulnerabilityProbability": "HIGH",
-            },
-            "status": "REVIEWED",
-            "textRange": Object {
-              "endLine": 142,
-              "endOffset": 83,
-              "startLine": 142,
-              "startOffset": 26,
-            },
-            "updateDate": "2013-05-13T17:55:42+0200",
-            "users": Array [
-              Object {
+                  "assignee": undefined,
+                  "assigneeUser": Object {
+                    "active": true,
+                    "local": true,
+                    "login": "assignee",
+                    "name": "John Doe",
+                  },
+                  "author": "author",
+                  "authorUser": Object {
+                    "active": true,
+                    "local": true,
+                    "login": "author",
+                    "name": "John Doe",
+                  },
+                  "canChangeStatus": true,
+                  "changelog": Array [],
+                  "comment": Array [],
+                  "component": Object {
+                    "breadcrumbs": Array [],
+                    "key": "my-project",
+                    "name": "MyProject",
+                    "organization": "foo",
+                    "qualifier": "FIL",
+                    "qualityGate": Object {
+                      "isDefault": true,
+                      "key": "30",
+                      "name": "Sonar way",
+                    },
+                    "qualityProfiles": Array [
+                      Object {
+                        "deleted": false,
+                        "key": "my-qp",
+                        "language": "ts",
+                        "name": "Sonar way",
+                      },
+                    ],
+                    "tags": Array [],
+                  },
+                  "creationDate": "2013-05-13T17:55:41+0200",
+                  "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+                  "line": 142,
+                  "message": "'3' is a magic number.",
+                  "project": Object {
+                    "breadcrumbs": Array [],
+                    "key": "my-project",
+                    "name": "MyProject",
+                    "organization": "foo",
+                    "qualifier": "TRK",
+                    "qualityGate": Object {
+                      "isDefault": true,
+                      "key": "30",
+                      "name": "Sonar way",
+                    },
+                    "qualityProfiles": Array [
+                      Object {
+                        "deleted": false,
+                        "key": "my-qp",
+                        "language": "ts",
+                        "name": "Sonar way",
+                      },
+                    ],
+                    "tags": Array [],
+                  },
+                  "resolution": "FIXED",
+                  "rule": Object {
+                    "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                    "key": "squid:S2077",
+                    "name": "That rule",
+                    "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                    "securityCategory": "sql-injection",
+                    "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                    "vulnerabilityProbability": "HIGH",
+                  },
+                  "status": "REVIEWED",
+                  "textRange": Object {
+                    "endLine": 142,
+                    "endOffset": 83,
+                    "startLine": 142,
+                    "startOffset": 26,
+                  },
+                  "updateDate": "2013-05-13T17:55:42+0200",
+                  "users": Array [
+                    Object {
+                      "active": true,
+                      "local": true,
+                      "login": "assignee",
+                      "name": "John Doe",
+                    },
+                    Object {
+                      "active": true,
+                      "local": true,
+                      "login": "author",
+                      "name": "John Doe",
+                    },
+                  ],
+                }
+              }
+              onAssigneeChange={[MockFunction]}
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="huge-spacer-left"
+      >
+        <Connect(withCurrentUser(Status))
+          hotspot={
+            Object {
+              "assignee": undefined,
+              "assigneeUser": Object {
                 "active": true,
                 "local": true,
                 "login": "assignee",
                 "name": "John Doe",
               },
-              Object {
+              "author": "author",
+              "authorUser": Object {
                 "active": true,
                 "local": true,
                 "login": "author",
                 "name": "John Doe",
               },
-            ],
-          }
-        }
-        onAssigneeChange={[MockFunction]}
-      />
-      <Connect(withCurrentUser(Status))
-        hotspot={
-          Object {
-            "assignee": undefined,
-            "assigneeUser": Object {
-              "active": true,
-              "local": true,
-              "login": "assignee",
-              "name": "John Doe",
-            },
-            "author": "author",
-            "authorUser": Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-            "canChangeStatus": true,
-            "changelog": Array [],
-            "comment": Array [],
-            "component": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "FIL",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
+              "canChangeStatus": true,
+              "changelog": Array [],
+              "comment": Array [],
+              "component": Object {
+                "breadcrumbs": Array [],
+                "key": "my-project",
+                "name": "MyProject",
+                "organization": "foo",
+                "qualifier": "FIL",
+                "qualityGate": Object {
+                  "isDefault": true,
+                  "key": "30",
                   "name": "Sonar way",
                 },
-              ],
-              "tags": Array [],
-            },
-            "creationDate": "2013-05-13T17:55:41+0200",
-            "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-            "line": 142,
-            "message": "'3' is a magic number.",
-            "project": Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
+                "qualityProfiles": Array [
+                  Object {
+                    "deleted": false,
+                    "key": "my-qp",
+                    "language": "ts",
+                    "name": "Sonar way",
+                  },
+                ],
+                "tags": Array [],
               },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
+              "creationDate": "2013-05-13T17:55:41+0200",
+              "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+              "line": 142,
+              "message": "'3' is a magic number.",
+              "project": Object {
+                "breadcrumbs": Array [],
+                "key": "my-project",
+                "name": "MyProject",
+                "organization": "foo",
+                "qualifier": "TRK",
+                "qualityGate": Object {
+                  "isDefault": true,
+                  "key": "30",
                   "name": "Sonar way",
                 },
-              ],
-              "tags": Array [],
-            },
-            "resolution": "FIXED",
-            "rule": Object {
-              "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-              "key": "squid:S2077",
-              "name": "That rule",
-              "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-              "securityCategory": "sql-injection",
-              "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-              "vulnerabilityProbability": "HIGH",
-            },
-            "status": "REVIEWED",
-            "textRange": Object {
-              "endLine": 142,
-              "endOffset": 83,
-              "startLine": 142,
-              "startOffset": 26,
-            },
-            "updateDate": "2013-05-13T17:55:42+0200",
-            "users": Array [
-              Object {
-                "active": true,
-                "local": true,
-                "login": "assignee",
-                "name": "John Doe",
+                "qualityProfiles": Array [
+                  Object {
+                    "deleted": false,
+                    "key": "my-qp",
+                    "language": "ts",
+                    "name": "Sonar way",
+                  },
+                ],
+                "tags": Array [],
               },
-              Object {
-                "active": true,
-                "local": true,
-                "login": "author",
-                "name": "John Doe",
+              "resolution": "FIXED",
+              "rule": Object {
+                "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                "key": "squid:S2077",
+                "name": "That rule",
+                "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                "securityCategory": "sql-injection",
+                "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                "vulnerabilityProbability": "HIGH",
               },
-            ],
+              "status": "REVIEWED",
+              "textRange": Object {
+                "endLine": 142,
+                "endOffset": 83,
+                "startLine": 142,
+                "startOffset": 26,
+              },
+              "updateDate": "2013-05-13T17:55:42+0200",
+              "users": Array [
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "assignee",
+                  "name": "John Doe",
+                },
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "author",
+                  "name": "John Doe",
+                },
+              ],
+            }
           }
-        }
-        onStatusChange={[MockFunction]}
-      />
+          onStatusChange={[MockFunction]}
+        />
+      </div>
     </div>
     <HotspotSnippetContainer
       branchLike={

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeRenderer.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeRenderer.tsx
index 8aae0d6d31eb93a0d6efdd386c734d6cf625d4fb..404320ebea48257fe2590705cddbae4b44519ba9 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeRenderer.tsx
@@ -43,39 +43,33 @@ export default function AssigneeRenderer(props: AssigneeRendererProps) {
   const { assignee, canEdit, loggedInUser, editing, loading } = props;
 
   return (
-    <div className="big-spacer-top display-flex-center">
-      <span>{translate('assignee')}:</span>
-
-      <span className="spacer-left">
-        <DeferredSpinner loading={loading}>
-          {!editing && (
-            <div className="display-flex-center">
-              <strong>
-                {assignee &&
-                  (assignee.active
-                    ? assignee.name ?? assignee.login
-                    : translateWithParameters('user.x_deleted', assignee.name ?? assignee.login))}
-                {!assignee && translate('unassigned')}
-              </strong>
-              {loggedInUser && canEdit && (
-                <EditButton className="spacer-left" onClick={props.onEnterEditionMode} />
-              )}
-            </div>
+    <DeferredSpinner loading={loading}>
+      {!editing && (
+        <div className="display-flex-center">
+          <strong className="nowrap">
+            {assignee &&
+              (assignee.active
+                ? assignee.name ?? assignee.login
+                : translateWithParameters('user.x_deleted', assignee.name ?? assignee.login))}
+            {!assignee && translate('unassigned')}
+          </strong>
+          {loggedInUser && canEdit && (
+            <EditButton className="spacer-left" onClick={props.onEnterEditionMode} />
           )}
+        </div>
+      )}
 
-          {loggedInUser && editing && (
-            <EscKeydownHandler onKeydown={props.onExitEditionMode}>
-              <OutsideClickHandler onClickOutside={props.onExitEditionMode}>
-                <AssigneeSelection
-                  allowCurrentUserSelection={loggedInUser.login !== assignee?.login}
-                  loggedInUser={loggedInUser}
-                  onSelect={props.onAssign}
-                />
-              </OutsideClickHandler>
-            </EscKeydownHandler>
-          )}
-        </DeferredSpinner>
-      </span>
-    </div>
+      {loggedInUser && editing && (
+        <EscKeydownHandler onKeydown={props.onExitEditionMode}>
+          <OutsideClickHandler onClickOutside={props.onExitEditionMode}>
+            <AssigneeSelection
+              allowCurrentUserSelection={loggedInUser.login !== assignee?.login}
+              loggedInUser={loggedInUser}
+              onSelect={props.onAssign}
+            />
+          </OutsideClickHandler>
+        </EscKeydownHandler>
+      )}
+    </DeferredSpinner>
   );
 }

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeSelection.css b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeSelection.css
index 7a5c24ebf0e0f5bac9eeed0c34bcbde154378e83..b24ade81378eed2219ad3a70e2309dd7e4bb286e 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeSelection.css
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeSelection.css
@@ -17,6 +17,11 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
+.hotspot-assignee-search-results {
+  min-width: 300px;
+}
+
 .hotspot-assignee-search-results li {
   cursor: pointer;
 }

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeSelectionRenderer.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeSelectionRenderer.tsx
index 23fedd178a9ed703efbff53f112a3918409b9fed..4d0f0fcf904839800b4582202635448d826d6a28 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeSelectionRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeSelectionRenderer.tsx
@@ -56,10 +56,7 @@ export default function AssigneeSelectionRenderer(props: HotspotAssigneeSelectRe
 
       {!loading && open && (
         <div className="position-relative">
-          <DropdownOverlay
-            className="abs-width-400"
-            noPadding={true}
-            placement={PopupPlacement.BottomLeft}>
+          <DropdownOverlay noPadding={true} placement={PopupPlacement.BottomLeft}>
             {suggestedUsers && suggestedUsers.length > 0 ? (
               <ul className="hotspot-assignee-search-results">
                 {suggestedUsers.map(suggestion => (

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeRenderer-test.tsx.snap
index 2b45d1fb5f411eb09be3da925726457a146bf586..9894738f7cc987dbbe31abadfb55cfc9edc2babd 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeRenderer-test.tsx.snap
@@ -1,135 +1,93 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly: editing 1`] = `
-<div
-  className="big-spacer-top display-flex-center"
+<DeferredSpinner
+  loading={false}
+  timeout={100}
 >
-  <span>
-    assignee
-    :
-  </span>
-  <span
-    className="spacer-left"
+  <EscKeydownHandler
+    onKeydown={[MockFunction]}
   >
-    <DeferredSpinner
-      loading={false}
-      timeout={100}
+    <OutsideClickHandler
+      onClickOutside={[MockFunction]}
     >
-      <EscKeydownHandler
-        onKeydown={[MockFunction]}
-      >
-        <OutsideClickHandler
-          onClickOutside={[MockFunction]}
-        >
-          <AssigneeSelection
-            allowCurrentUserSelection={false}
-            loggedInUser={
-              Object {
-                "groups": Array [],
-                "isLoggedIn": true,
-                "login": "luke",
-                "name": "Skywalker",
-                "scmAccounts": Array [],
-              }
-            }
-            onSelect={[MockFunction]}
-          />
-        </OutsideClickHandler>
-      </EscKeydownHandler>
-    </DeferredSpinner>
-  </span>
-</div>
+      <AssigneeSelection
+        allowCurrentUserSelection={false}
+        loggedInUser={
+          Object {
+            "groups": Array [],
+            "isLoggedIn": true,
+            "login": "luke",
+            "name": "Skywalker",
+            "scmAccounts": Array [],
+          }
+        }
+        onSelect={[MockFunction]}
+      />
+    </OutsideClickHandler>
+  </EscKeydownHandler>
+</DeferredSpinner>
 `;
 
 exports[`should render correctly: not editing 1`] = `
-<div
-  className="big-spacer-top display-flex-center"
+<DeferredSpinner
+  loading={false}
+  timeout={100}
 >
-  <span>
-    assignee
-    :
-  </span>
-  <span
-    className="spacer-left"
+  <div
+    className="display-flex-center"
   >
-    <DeferredSpinner
-      loading={false}
-      timeout={100}
+    <strong
+      className="nowrap"
     >
-      <div
-        className="display-flex-center"
-      >
-        <strong>
-          user.x_deleted.Skywalker
-        </strong>
-        <EditButton
-          className="spacer-left"
-          onClick={[MockFunction]}
-        />
-      </div>
-    </DeferredSpinner>
-  </span>
-</div>
+      user.x_deleted.Skywalker
+    </strong>
+    <EditButton
+      className="spacer-left"
+      onClick={[MockFunction]}
+    />
+  </div>
+</DeferredSpinner>
 `;
 
 exports[`should render correctly: with active assignee 1`] = `
-<div
-  className="big-spacer-top display-flex-center"
+<DeferredSpinner
+  loading={false}
+  timeout={100}
 >
-  <span>
-    assignee
-    :
-  </span>
-  <span
-    className="spacer-left"
+  <div
+    className="display-flex-center"
   >
-    <DeferredSpinner
-      loading={false}
-      timeout={100}
+    <strong
+      className="nowrap"
     >
-      <div
-        className="display-flex-center"
-      >
-        <strong>
-          John Doe
-        </strong>
-        <EditButton
-          className="spacer-left"
-          onClick={[MockFunction]}
-        />
-      </div>
-    </DeferredSpinner>
-  </span>
-</div>
+      John Doe
+    </strong>
+    <EditButton
+      className="spacer-left"
+      onClick={[MockFunction]}
+    />
+  </div>
+</DeferredSpinner>
 `;
 
 exports[`should render correctly: without current assignee 1`] = `
-<div
-  className="big-spacer-top display-flex-center"
+<DeferredSpinner
+  loading={false}
+  timeout={100}
 >
-  <span>
-    assignee
-    :
-  </span>
-  <span
-    className="spacer-left"
+  <div
+    className="display-flex-center"
   >
-    <DeferredSpinner
-      loading={false}
-      timeout={100}
+    <strong
+      className="nowrap"
     >
-      <div
-        className="display-flex-center"
-      >
-        <strong>
-          unassigned
-        </strong>
-        <EditButton
-          className="spacer-left"
-          onClick={[MockFunction]}
-        />
-      </div>
-    </DeferredSpinner>
-  </span>
-</div>
+      unassigned
+    </strong>
+    <EditButton
+      className="spacer-left"
+      onClick={[MockFunction]}
+    />
+  </div>
+</DeferredSpinner>
 `;

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeSelectionRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeSelectionRenderer-test.tsx.snap
index 004aedfae6cdfa5b901f57582059da270ad2e624..310ea10da4a6f1b711cd81c02a1bdb1cd30c3fca 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeSelectionRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeSelectionRenderer-test.tsx.snap
@@ -50,7 +50,6 @@ exports[`should render correctly: open 1`] = `
     className="position-relative"
   >
     <DropdownOverlay
-      className="abs-width-400"
       noPadding={true}
       placement="bottom-left"
     >
@@ -80,7 +79,6 @@ exports[`should render correctly: open with results 1`] = `
     className="position-relative"
   >
     <DropdownOverlay
-      className="abs-width-400"
       noPadding={true}
       placement="bottom-left"
     >

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/Status.css b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/Status.css
index b48cb0745fcdf59a93b3103b13dcbfd049491735..8e514f4a12b5f169203adcb773084fffe7e319ff 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/Status.css
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/Status.css
@@ -19,7 +19,7 @@
  */
 
 #status-trigger,
-.popup {
+#status-trigger + .popup {
   width: 400px;
   box-sizing: border-box;
 }

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/Status.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/Status.tsx
index 006b7f589328ca485df335a8e127b2521771eb08..097bda68eee9168ff61aaa5f3abc0b48b5920a12 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/Status.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/Status.tsx
@@ -92,7 +92,7 @@ export function Status(props: StatusProps) {
   );
 
   return (
-    <div className="dropdown huge-spacer-left">
+    <div className="dropdown">
       {readonly ? (
         <Tooltip overlay={translate('hotspots.status.cannot_change_status')} placement="bottom">
           {actionableTrigger}

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/Status-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/Status-test.tsx.snap
index 36c5ed7da904258afdf25e5e8943fcf37ecaf299..7438207a07cca25f6b8c6a6dbce76f76478007a4 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/Status-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/Status-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should render correctly: closed 1`] = `
 <div
-  className="dropdown huge-spacer-left"
+  className="dropdown"
 >
   <Toggler
     closeOnClickOutside={true}
@@ -146,7 +146,7 @@ exports[`should render correctly: closed 1`] = `
 
 exports[`should render correctly: open 1`] = `
 <div
-  className="dropdown huge-spacer-left"
+  className="dropdown"
 >
   <Toggler
     closeOnClickOutside={true}
@@ -291,7 +291,7 @@ exports[`should render correctly: open 1`] = `
 
 exports[`should render correctly: readonly 1`] = `
 <div
-  className="dropdown huge-spacer-left"
+  className="dropdown"
 >
   <Tooltip
     overlay="hotspots.status.cannot_change_status"

diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index f19013aa7acc185e9e2d2335fdf1b7550635000c..880fabbf0572d0f56a1cbc9c83cda1dd0e5dacaf 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -662,7 +662,7 @@ hotspots.list_title={0} Security Hotspots
 hotspots.list_title.TO_REVIEW={0} Security Hotspots to review
 hotspots.list_title.FIXED={0} Security Hotspots reviewed as fixed
 hotspots.list_title.SAFE={0} Security Hotspots reviewed as safe
-hotspots.risk_exposure=Review priority:
+hotspots.risk_exposure=Review priority
 
 hotspots.tabs.risk_description=What's the risk?
 hotspots.tabs.vulnerability_description=Are you at risk?