SONAR-16071 Hotspots UI improvements

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx
index e9d62110882b4d0e55255a551f11ba2ab4338f4a..6e3aa2bfd6558fec57bb9189a89d380085302a42 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx
@@ -38,7 +38,7 @@ export function HotspotHeader(props: HotspotHeaderProps) {
     <div className="huge-spacer-bottom">
       <div className="display-flex-column big-spacer-bottom">
         <div className="big text-bold">{message}</div>
-        <div>
+        <div className="spacer-top">
           <span className="note padded-right">{rule.name}</span>
           <Link className="small" to={getRuleUrl(rule.key)} target="_blank">
             {rule.key}
@@ -52,7 +52,7 @@ export function HotspotHeader(props: HotspotHeaderProps) {
         />
         <div className="display-flex-end">
           <div className="display-inline-flex-center it__hs-assignee">
-            <div className="text-bold big-spacer-right">{`${translate('assignee')}: `}</div>
+            <div className="big-spacer-right">{`${translate('assignee')}: `}</div>
             <Assignee hotspot={hotspot} onAssigneeChange={props.onUpdateHotspot} />
           </div>
         </div>

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 4ae08aa223eb90b8edea44b7062c6d4baa821888..3520a85c6732cd3a3332a92c0155f07cd70dca69 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
@@ -137,13 +137,13 @@ export default class HotspotList extends React.Component<Props, State> {
             hotspotsTotal
           )}
         </h1>
-        <ul className="big-spacer-bottom">
+        <ul className="big-spacer-bottom big-spacer-top">
           {groupedHotspots.map((riskGroup, riskGroupIndex) => {
             const isLastRiskGroup = riskGroupIndex === groupedHotspots.length - 1;
 
             return (
               <li className="big-spacer-bottom" key={riskGroup.risk}>
-                <div className="hotspot-risk-header little-spacer-left">
+                <div className="hotspot-risk-header little-spacer-left spacer-top spacer-bottom">
                   <span>{translate('hotspots.risk_exposure')}:</span>
                   <div className={classNames('hotspot-risk-badge', 'spacer-left', riskGroup.risk)}>
                     {translate('risk_exposure', riskGroup.risk)}

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx
index ae34502f027504209d231ffd6616090e6a3d0ed9..cb98214d2074e89d40829b242c5dfe5b8b29dd6d 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx
@@ -50,26 +50,22 @@ export default function HotspotListItem(props: HotspotListItemProps) {
         role={selected ? 'button' : undefined}>
         {hotspot.message}
       </div>
-      <div className="display-flex-center">
+      <div className="display-flex-center big-spacer-top">
         <QualifierIcon qualifier={ComponentQualifier.File} />
-        <div
-          className="little-spacer-left hotspot-box-filename text-ellipsis big-spacer-top big-spacer-bottom"
-          title={path}>
+        <div className="little-spacer-left hotspot-box-filename text-ellipsis" title={path}>
           {path}
         </div>
       </div>
-      <div className="spacer-top">
-        {selected && (
-          <LocationsList
-            locations={locations}
-            isCrossFile={false} // Currently we are not supporting cross file for security hotspot
-            uniqueKey={hotspot.key}
-            onLocationSelect={props.onLocationClick}
-            selectedLocationIndex={selectedHotspotLocation}
-            scroll={props.onScroll}
-          />
-        )}
-      </div>
+      {selected && (
+        <LocationsList
+          locations={locations}
+          isCrossFile={false} // Currently we are not supporting cross file for security hotspot
+          uniqueKey={hotspot.key}
+          onLocationSelect={props.onLocationClick}
+          selectedLocationIndex={selectedHotspotLocation}
+          scroll={props.onScroll}
+        />
+      )}
     </a>
   );
 }

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
index 1c5b55d845255cd8b4e0852530a2a92b9d530001..30cf6cd2522181335b88ac9d860b0f31d66e9a92 100644 (file)
--- 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
@@ -29,3 +29,7 @@
   max-height: calc(100vh - 500px);
   overflow: auto;
 }
+
+.hotspot-content .markdown {
+  line-height: 1.8;
+}

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotHeader-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotHeader-test.tsx.snap
index 23768a71abb78bfdf94aa7984846c4666897e604..2f09502b2840d1c0a92b60ac446ea8865154dcfb 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotHeader-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotHeader-test.tsx.snap
@@ -12,7 +12,9 @@ exports[`should render correctly 1`] = `
     >
       '3' is a magic number.
     </div>
-    <div>
+    <div
+      className="spacer-top"
+    >
       <span
         className="note padded-right"
       >
@@ -136,7 +138,7 @@ exports[`should render correctly 1`] = `
         className="display-inline-flex-center it__hs-assignee"
       >
         <div
-          className="text-bold big-spacer-right"
+          className="big-spacer-right"
         >
           assignee: 
         </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 9fd195681f6fd9bdbca2b51a244821587a5d70fe..92c180c0403d16d4216f08b2c4ac947ec37b7c61 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
@@ -13,7 +13,7 @@ exports[`should render correctly 1`] = `
     hotspots.list_title.TO_REVIEW.0
   </h1>
   <ul
-    className="big-spacer-bottom"
+    className="big-spacer-bottom big-spacer-top"
   />
   <ListFooter
     count={0}
@@ -37,7 +37,7 @@ exports[`should render correctly 2`] = `
     hotspots.list_title.TO_REVIEW.0
   </h1>
   <ul
-    className="big-spacer-bottom"
+    className="big-spacer-bottom big-spacer-top"
   />
   <ListFooter
     count={0}
@@ -60,7 +60,7 @@ exports[`should render correctly when the list of hotspot is static 1`] = `
     hotspots.list_title.0
   </h1>
   <ul
-    className="big-spacer-bottom"
+    className="big-spacer-bottom big-spacer-top"
   />
   <ListFooter
     count={0}
@@ -84,14 +84,14 @@ exports[`should render correctly with hotspots: no pagination 1`] = `
     hotspots.list_title.TO_REVIEW.5
   </h1>
   <ul
-    className="big-spacer-bottom"
+    className="big-spacer-bottom big-spacer-top"
   >
     <li
       className="big-spacer-bottom"
       key="HIGH"
     >
       <div
-        className="hotspot-risk-header little-spacer-left"
+        className="hotspot-risk-header little-spacer-left spacer-top spacer-bottom"
       >
         <span>
           hotspots.risk_exposure
@@ -211,7 +211,7 @@ exports[`should render correctly with hotspots: no pagination 1`] = `
       key="MEDIUM"
     >
       <div
-        className="hotspot-risk-header little-spacer-left"
+        className="hotspot-risk-header little-spacer-left spacer-top spacer-bottom"
       >
         <span>
           hotspots.risk_exposure
@@ -364,14 +364,14 @@ exports[`should render correctly with hotspots: pagination 1`] = `
     hotspots.list_title.TO_REVIEW.7
   </h1>
   <ul
-    className="big-spacer-bottom"
+    className="big-spacer-bottom big-spacer-top"
   >
     <li
       className="big-spacer-bottom"
       key="HIGH"
     >
       <div
-        className="hotspot-risk-header little-spacer-left"
+        className="hotspot-risk-header little-spacer-left spacer-top spacer-bottom"
       >
         <span>
           hotspots.risk_exposure
@@ -491,7 +491,7 @@ exports[`should render correctly with hotspots: pagination 1`] = `
       key="MEDIUM"
     >
       <div
-        className="hotspot-risk-header little-spacer-left"
+        className="hotspot-risk-header little-spacer-left spacer-top spacer-bottom"
       >
         <span>
           hotspots.risk_exposure

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotListItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotListItem-test.tsx.snap
index 12b6518b12a0084ee06de9a4f2d5b4c9f6c2dc4d..d4a533e7934c02299cccb744e17b6ad03c64de75 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotListItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotListItem-test.tsx.snap
@@ -12,21 +12,18 @@ exports[`should render correctly 1`] = `
     '3' is a magic number.
   </div>
   <div
-    className="display-flex-center"
+    className="display-flex-center big-spacer-top"
   >
     <QualifierIcon
       qualifier="FIL"
     />
     <div
-      className="little-spacer-left hotspot-box-filename text-ellipsis big-spacer-top big-spacer-bottom"
+      className="little-spacer-left hotspot-box-filename text-ellipsis"
       title="com.github.kevinsawicki.http.HttpRequest"
     >
       com.github.kevinsawicki.http.HttpRequest
     </div>
   </div>
-  <div
-    className="spacer-top"
-  />
 </a>
 `;
 
@@ -44,28 +41,24 @@ exports[`should render correctly 2`] = `
     '3' is a magic number.
   </div>
   <div
-    className="display-flex-center"
+    className="display-flex-center big-spacer-top"
   >
     <QualifierIcon
       qualifier="FIL"
     />
     <div
-      className="little-spacer-left hotspot-box-filename text-ellipsis big-spacer-top big-spacer-bottom"
+      className="little-spacer-left hotspot-box-filename text-ellipsis"
       title="com.github.kevinsawicki.http.HttpRequest"
     >
       com.github.kevinsawicki.http.HttpRequest
     </div>
   </div>
-  <div
-    className="spacer-top"
-  >
-    <LocationsList
-      isCrossFile={false}
-      locations={Array []}
-      onLocationSelect={[Function]}
-      scroll={[MockFunction]}
-      uniqueKey="01fc972e-2a3c-433e-bcae-0bd7f88f5123"
-    />
-  </div>
+  <LocationsList
+    isCrossFile={false}
+    locations={Array []}
+    onLocationSelect={[Function]}
+    scroll={[MockFunction]}
+    uniqueKey="01fc972e-2a3c-433e-bcae-0bd7f88f5123"
+  />
 </a>
 `;

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusDescription.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusDescription.tsx
index 53e6e2d83ec9ab3fd4cd8a5ac36c6b97216b48c9..63eb4abc3b94af04ae49e10cca54262a8903b82a 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusDescription.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusDescription.tsx
@@ -36,7 +36,9 @@ export default function StatusDescription(props: StatusDescriptionProps) {
         {showTitle && `${translate('status')}: `}
         <div className="badge">{translate('hotspots.status_option', statusOption)}</div>
       </h3>
-      <span>{translate('hotspots.status_option', statusOption, 'description')}</span>
+      <div className="little-spacer-top">
+        {translate('hotspots.status_option', statusOption, 'description')}
+      </div>
     </Container>
   );
 }

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/StatusDescription-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/StatusDescription-test.tsx.snap
index 1422872bae490edb1c665e76d6841ca0c73dc610..6eb6b70e5fbee1ae8593de78efd093f950048bff 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/StatusDescription-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/StatusDescription-test.tsx.snap
@@ -9,9 +9,11 @@ exports[`should render correctly 1`] = `
       hotspots.status_option.TO_REVIEW
     </div>
   </h3>
-  <span>
+  <div
+    className="little-spacer-top"
+  >
     hotspots.status_option.TO_REVIEW.description
-  </span>
+  </div>
 </Styled(div)>
 `;
 
@@ -25,8 +27,10 @@ exports[`should render correctly: with title 1`] = `
       hotspots.status_option.TO_REVIEW
     </div>
   </h3>
-  <span>
+  <div
+    className="little-spacer-top"
+  >
     hotspots.status_option.TO_REVIEW.description
-  </span>
+  </div>
 </Styled(div)>
 `;