From ebf6acb718a4806dde30ad90df77bbb58733ea47 Mon Sep 17 00:00:00 2001
From: Pascal Mugnier <pascal.mugnier@sonarsource.com>
Date: Mon, 30 Jul 2018 10:24:00 +0200
Subject: [PATCH] SONAR-11078 Improve Security Hotspots page layout (#562)

---
 .../components/VulnerabilityList.tsx          | 13 +++----
 .../VulnerabilityList-test.tsx.snap           | 39 +++++++------------
 .../main/js/apps/securityReports/style.css    |  8 ++++
 3 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/securityReports/components/VulnerabilityList.tsx b/server/sonar-web/src/main/js/apps/securityReports/components/VulnerabilityList.tsx
index 262c5380aef..a764647e5db 100755
--- a/server/sonar-web/src/main/js/apps/securityReports/components/VulnerabilityList.tsx
+++ b/server/sonar-web/src/main/js/apps/securityReports/components/VulnerabilityList.tsx
@@ -169,9 +169,8 @@ export default class VulnerabilityList extends React.PureComponent<Props, State>
               </Tooltip>
             </div>
           </td>
-          <td className="text-right">
+          <td className="text-right security-column-separator">
             <Link
-              className="spacer-right"
               to={getComponentIssuesUrl(component.key, {
                 ...params,
                 types: 'SECURITY_HOTSPOT',
@@ -183,7 +182,6 @@ export default class VulnerabilityList extends React.PureComponent<Props, State>
           </td>
           <td className="text-right">
             <Link
-              className="spacer-right"
               to={getComponentIssuesUrl(component.key, {
                 ...params,
                 types: 'SECURITY_HOTSPOT',
@@ -195,7 +193,6 @@ export default class VulnerabilityList extends React.PureComponent<Props, State>
           </td>
           <td className="text-right">
             <Link
-              className="spacer-right"
               to={getComponentIssuesUrl(component.key, {
                 ...params,
                 types: 'SECURITY_HOTSPOT',
@@ -214,19 +211,19 @@ export default class VulnerabilityList extends React.PureComponent<Props, State>
   render() {
     return (
       <div className="boxed-group boxed-group-inner spacer-top">
-        <table className="data zebra">
+        <table className="data zebra security-reports">
           <thead>
             <tr>
               <th className="security-category-column">
                 {translate('security_reports.list.categories')}
               </th>
-              <th className="security-result-column">
+              <th className="security-result-column text-right">
                 <div className="display-inline-flex-center">
                   <VulnerabilityIcon className="spacer-right" />
                   {translate('security_reports.list.vulnerabilities')}
                 </div>
               </th>
-              <th colSpan={3}>
+              <th className="text-right security-column-separator" colSpan={3}>
                 <div className="display-inline-flex-center">
                   <SecurityHotspotIcon className="spacer-right" />
                   {translate('security_reports.list.hotspots')}
@@ -235,7 +232,7 @@ export default class VulnerabilityList extends React.PureComponent<Props, State>
             </tr>
             <tr className="subheader">
               <th colSpan={2} />
-              <th className="text-right security-result-column">
+              <th className="text-right security-result-column security-column-separator">
                 {translate('security_reports.line.open')}
               </th>
               <th className="text-right security-result-column">
diff --git a/server/sonar-web/src/main/js/apps/securityReports/components/__tests__/__snapshots__/VulnerabilityList-test.tsx.snap b/server/sonar-web/src/main/js/apps/securityReports/components/__tests__/__snapshots__/VulnerabilityList-test.tsx.snap
index 117782d5227..d296ead10a7 100644
--- a/server/sonar-web/src/main/js/apps/securityReports/components/__tests__/__snapshots__/VulnerabilityList-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/securityReports/components/__tests__/__snapshots__/VulnerabilityList-test.tsx.snap
@@ -5,7 +5,7 @@ exports[`renders 1`] = `
   className="boxed-group boxed-group-inner spacer-top"
 >
   <table
-    className="data zebra"
+    className="data zebra security-reports"
   >
     <thead>
       <tr>
@@ -15,7 +15,7 @@ exports[`renders 1`] = `
           security_reports.list.categories
         </th>
         <th
-          className="security-result-column"
+          className="security-result-column text-right"
         >
           <div
             className="display-inline-flex-center"
@@ -27,6 +27,7 @@ exports[`renders 1`] = `
           </div>
         </th>
         <th
+          className="text-right security-column-separator"
           colSpan={3}
         >
           <div
@@ -46,7 +47,7 @@ exports[`renders 1`] = `
           colSpan={2}
         />
         <th
-          className="text-right security-result-column"
+          className="text-right security-result-column security-column-separator"
         >
           security_reports.line.open
         </th>
@@ -124,10 +125,9 @@ exports[`renders 1`] = `
             </div>
           </td>
           <td
-            className="text-right"
+            className="text-right security-column-separator"
           >
             <Link
-              className="spacer-right"
               onlyActiveOnIndex={false}
               style={Object {}}
               to={
@@ -150,7 +150,6 @@ exports[`renders 1`] = `
             className="text-right"
           >
             <Link
-              className="spacer-right"
               onlyActiveOnIndex={false}
               style={Object {}}
               to={
@@ -173,7 +172,6 @@ exports[`renders 1`] = `
             className="text-right"
           >
             <Link
-              className="spacer-right"
               onlyActiveOnIndex={false}
               style={Object {}}
               to={
@@ -255,10 +253,9 @@ exports[`renders 1`] = `
             </div>
           </td>
           <td
-            className="text-right"
+            className="text-right security-column-separator"
           >
             <Link
-              className="spacer-right"
               onlyActiveOnIndex={false}
               style={Object {}}
               to={
@@ -281,7 +278,6 @@ exports[`renders 1`] = `
             className="text-right"
           >
             <Link
-              className="spacer-right"
               onlyActiveOnIndex={false}
               style={Object {}}
               to={
@@ -304,7 +300,6 @@ exports[`renders 1`] = `
             className="text-right"
           >
             <Link
-              className="spacer-right"
               onlyActiveOnIndex={false}
               style={Object {}}
               to={
@@ -335,7 +330,7 @@ exports[`renders with cwe 1`] = `
   className="boxed-group boxed-group-inner spacer-top"
 >
   <table
-    className="data zebra"
+    className="data zebra security-reports"
   >
     <thead>
       <tr>
@@ -345,7 +340,7 @@ exports[`renders with cwe 1`] = `
           security_reports.list.categories
         </th>
         <th
-          className="security-result-column"
+          className="security-result-column text-right"
         >
           <div
             className="display-inline-flex-center"
@@ -357,6 +352,7 @@ exports[`renders with cwe 1`] = `
           </div>
         </th>
         <th
+          className="text-right security-column-separator"
           colSpan={3}
         >
           <div
@@ -376,7 +372,7 @@ exports[`renders with cwe 1`] = `
           colSpan={2}
         />
         <th
-          className="text-right security-result-column"
+          className="text-right security-result-column security-column-separator"
         >
           security_reports.line.open
         </th>
@@ -454,10 +450,9 @@ exports[`renders with cwe 1`] = `
             </div>
           </td>
           <td
-            className="text-right"
+            className="text-right security-column-separator"
           >
             <Link
-              className="spacer-right"
               onlyActiveOnIndex={false}
               style={Object {}}
               to={
@@ -480,7 +475,6 @@ exports[`renders with cwe 1`] = `
             className="text-right"
           >
             <Link
-              className="spacer-right"
               onlyActiveOnIndex={false}
               style={Object {}}
               to={
@@ -503,7 +497,6 @@ exports[`renders with cwe 1`] = `
             className="text-right"
           >
             <Link
-              className="spacer-right"
               onlyActiveOnIndex={false}
               style={Object {}}
               to={
@@ -586,10 +579,9 @@ exports[`renders with cwe 1`] = `
               </div>
             </td>
             <td
-              className="text-right"
+              className="text-right security-column-separator"
             >
               <Link
-                className="spacer-right"
                 onlyActiveOnIndex={false}
                 style={Object {}}
                 to={
@@ -613,7 +605,6 @@ exports[`renders with cwe 1`] = `
               className="text-right"
             >
               <Link
-                className="spacer-right"
                 onlyActiveOnIndex={false}
                 style={Object {}}
                 to={
@@ -637,7 +628,6 @@ exports[`renders with cwe 1`] = `
               className="text-right"
             >
               <Link
-                className="spacer-right"
                 onlyActiveOnIndex={false}
                 style={Object {}}
                 to={
@@ -721,10 +711,9 @@ exports[`renders with cwe 1`] = `
             </div>
           </td>
           <td
-            className="text-right"
+            className="text-right security-column-separator"
           >
             <Link
-              className="spacer-right"
               onlyActiveOnIndex={false}
               style={Object {}}
               to={
@@ -747,7 +736,6 @@ exports[`renders with cwe 1`] = `
             className="text-right"
           >
             <Link
-              className="spacer-right"
               onlyActiveOnIndex={false}
               style={Object {}}
               to={
@@ -770,7 +758,6 @@ exports[`renders with cwe 1`] = `
             className="text-right"
           >
             <Link
-              className="spacer-right"
               onlyActiveOnIndex={false}
               style={Object {}}
               to={
diff --git a/server/sonar-web/src/main/js/apps/securityReports/style.css b/server/sonar-web/src/main/js/apps/securityReports/style.css
index c6159cc467c..6fc539ef47e 100644
--- a/server/sonar-web/src/main/js/apps/securityReports/style.css
+++ b/server/sonar-web/src/main/js/apps/securityReports/style.css
@@ -17,6 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+.security-column-separator {
+  border-left: 1px solid var(--barBorderColor);
+}
+
 .security-category-column {
   width: 52%;
 }
@@ -25,6 +29,10 @@
   width: 12%;
 }
 
+table.data.security-reports > thead:after {
+  content: none;
+}
+
 .cwe-title-cell {
   padding-left: 80px !important;
 }
-- 
2.39.5