SONAR-11397 Update UI using WS mock

diff --git a/server/sonar-web/src/main/js/apps/securityReports/components/App.tsx b/server/sonar-web/src/main/js/apps/securityReports/components/App.tsx
index 2dd70f90ee1ef17d4d4966ae1b4af06d10ebd4ec..025b661e6499e071209eb8f592ad7cd9c3e58f94 100755 (executable)
--- a/server/sonar-web/src/main/js/apps/securityReports/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/securityReports/components/App.tsx
@@ -145,7 +145,7 @@ export default class App extends React.PureComponent<Props, State> {
               to={{ pathname: '/documentation/user-guide/security-reports/' }}>
               {translate('learn_more')}
             </Link>
-            <p className="alert alert-info spacer-top display-inline-block">
+            <div className="alert alert-info spacer-top display-inline-block">
               <FormattedMessage
                 defaultMessage={translate('security_reports.info')}
                 id="security_reports.info"
@@ -162,7 +162,7 @@ export default class App extends React.PureComponent<Props, State> {
                   )
                 }}
               />
-            </p>
+            </div>
           </div>
         </header>
         <div className="display-inline-flex-center">

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 e566a2405fb58b16be8cedc8f4b8b32e9b66ea63..3094cd5554a782fd52aa344abc179abe58365515 100755 (executable)
--- a/server/sonar-web/src/main/js/apps/securityReports/components/VulnerabilityList.tsx
+++ b/server/sonar-web/src/main/js/apps/securityReports/components/VulnerabilityList.tsx
@@ -20,10 +20,10 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { Link } from 'react-router';
-import { translate } from '../../../helpers/l10n';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { SecurityHotspot, Component, BranchLike, IssueType } from '../../../app/types';
 import Rating from '../../../components/ui/Rating';
-import { getComponentIssuesUrl } from '../../../helpers/urls';
+import { getComponentIssuesUrl, getRulesUrl } from '../../../helpers/urls';
 import { getBranchLikeQuery } from '../../../helpers/branches';
 import HelpTooltip from '../../../components/controls/HelpTooltip';
 import VulnerabilityIcon from '../../../components/icons-components/VulnerabilityIcon';
@@ -37,6 +37,9 @@ import {
 import DetachIcon from '../../../components/icons-components/DetachIcon';
 import Tooltip from '../../../components/controls/Tooltip';
 import { getRatingTooltip } from '../../../helpers/measures';
+import PlusCircleIcon from '../../../components/icons-components/PlusCircleIcon';
+import { isSonarCloud } from '../../../helpers/system';
+import * as theme from '../../../app/theme';
 
 interface Props {
   branchLike?: BranchLike;
@@ -76,7 +79,12 @@ export default class VulnerabilityList extends React.PureComponent<Props, State>
       );
   };
 
-  getName(finding: SecurityHotspot, type: 'owaspTop10' | 'sansTop25' | 'cwe') {
+  getName(
+    finding: SecurityHotspot,
+    type: 'owaspTop10' | 'sansTop25' | 'cwe',
+    activeRules: number,
+    totalRules: number
+  ) {
     const category = finding.category || finding.cwe || 'unknown';
     const renderers = {
       owaspTop10: renderOwaspTop10Category,
@@ -93,10 +101,36 @@ export default class VulnerabilityList extends React.PureComponent<Props, State>
               overlay={this.renderOverlay(this.state.standards[type][category].description)}
             />
           )}
+        {activeRules === 0 &&
+          totalRules > 0 && (
+            <HelpTooltip className="spacer-left" overlay={this.renderMoreRulesOverlay(totalRules)}>
+              <PlusCircleIcon className="vertical-middle" fill={theme.blue} size={12} />
+            </HelpTooltip>
+          )}
       </>
     );
   }
 
+  renderMoreRulesOverlay = (totalRules: number) => {
+    const languages = this.props.component.qualityProfiles
+      ? this.props.component.qualityProfiles.map(qp => qp.language).join(',')
+      : '';
+    return (
+      <>
+        <p>{translate('security_reports.activate_rules')}</p>
+        <hr className="spacer-top spacer-bottom" />
+        <Link
+          className="spacer-left link-no-underline"
+          to={getRulesUrl(
+            { languages, types: `${IssueType.Hotspot},${IssueType.Vulnerability}` },
+            isSonarCloud() ? this.props.component.organization : undefined
+          )}>
+          {translateWithParameters('security_reports.activate_rules.link', totalRules)}
+        </Link>
+      </>
+    );
+  };
+
   renderOverlay = (description: string | undefined) => {
     return (
       <>
@@ -145,7 +179,7 @@ export default class VulnerabilityList extends React.PureComponent<Props, State>
       <React.Fragment key={finding.category || finding.cwe}>
         <tr>
           <td className={classNames({ 'cwe-title-cell': isCWE })}>
-            {this.getName(finding, isCWE ? 'cwe' : type)}
+            {this.getName(finding, isCWE ? 'cwe' : type, finding.activeRules, finding.totalRules)}
           </td>
           <td className="text-right">
             {!hasActiveRules && '-'}

diff --git a/server/sonar-web/src/main/js/apps/securityReports/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/securityReports/components/__tests__/__snapshots__/App-test.tsx.snap
index f61e0fc1a5d336d550c5848b26e069c9cf304bc9..840caeee3a101c677649d2cc50868db70b7f6ed6 100644 (file)
--- a/server/sonar-web/src/main/js/apps/securityReports/components/__tests__/__snapshots__/App-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/securityReports/components/__tests__/__snapshots__/App-test.tsx.snap
@@ -38,7 +38,7 @@ exports[`handle checkbox for cwe display 1`] = `
       >
         learn_more
       </Link>
-      <p
+      <div
         className="alert alert-info spacer-top display-inline-block"
       >
         <FormattedMessage
@@ -64,7 +64,7 @@ exports[`handle checkbox for cwe display 1`] = `
             }
           }
         />
-      </p>
+      </div>
     </div>
   </header>
   <div
@@ -148,7 +148,7 @@ exports[`handle checkbox for cwe display 2`] = `
       >
         learn_more
       </Link>
-      <p
+      <div
         className="alert alert-info spacer-top display-inline-block"
       >
         <FormattedMessage
@@ -174,7 +174,7 @@ exports[`handle checkbox for cwe display 2`] = `
             }
           }
         />
-      </p>
+      </div>
     </div>
   </header>
   <div
@@ -305,7 +305,7 @@ exports[`renders owaspTop10 1`] = `
       >
         learn_more
       </Link>
-      <p
+      <div
         className="alert alert-info spacer-top display-inline-block"
       >
         <FormattedMessage
@@ -331,7 +331,7 @@ exports[`renders owaspTop10 1`] = `
             }
           }
         />
-      </p>
+      </div>
     </div>
   </header>
   <div
@@ -415,7 +415,7 @@ exports[`renders sansTop25 1`] = `
       >
         learn_more
       </Link>
-      <p
+      <div
         className="alert alert-info spacer-top display-inline-block"
       >
         <FormattedMessage
@@ -441,7 +441,7 @@ exports[`renders sansTop25 1`] = `
             }
           }
         />
-      </p>
+      </div>
     </div>
   </header>
   <div
@@ -525,7 +525,7 @@ exports[`renders with cwe 1`] = `
       >
         learn_more
       </Link>
-      <p
+      <div
         className="alert alert-info spacer-top display-inline-block"
       >
         <FormattedMessage
@@ -551,7 +551,7 @@ exports[`renders with cwe 1`] = `
             }
           }
         />
-      </p>
+      </div>
     </div>
   </header>
   <div

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 5c19bde0e7c125b8a319f59ce7333ef485f78df3..33b0ec369619e2d664de87aefaa54ffc838039d5 100644 (file)
--- 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
@@ -329,6 +329,41 @@ exports[`renders 1`] = `
           >
             <React.Fragment>
               A3
+              <HelpTooltip
+                className="spacer-left"
+                overlay={
+                  <React.Fragment>
+                    <p>
+                      security_reports.activate_rules
+                    </p>
+                    <hr
+                      className="spacer-top spacer-bottom"
+                    />
+                    <Link
+                      className="spacer-left link-no-underline"
+                      onlyActiveOnIndex={false}
+                      style={Object {}}
+                      to={
+                        Object {
+                          "pathname": "/coding_rules",
+                          "query": Object {
+                            "languages": "",
+                            "types": "SECURITY_HOTSPOT,VULNERABILITY",
+                          },
+                        }
+                      }
+                    >
+                      security_reports.activate_rules.link.1
+                    </Link>
+                  </React.Fragment>
+                }
+              >
+                <PlusCircleIcon
+                  className="vertical-middle"
+                  fill="#4b9fd5"
+                  size={12}
+                />
+              </HelpTooltip>
             </React.Fragment>
           </td>
           <td
@@ -1081,6 +1116,41 @@ exports[`renders with cwe 1`] = `
           >
             <React.Fragment>
               A3
+              <HelpTooltip
+                className="spacer-left"
+                overlay={
+                  <React.Fragment>
+                    <p>
+                      security_reports.activate_rules
+                    </p>
+                    <hr
+                      className="spacer-top spacer-bottom"
+                    />
+                    <Link
+                      className="spacer-left link-no-underline"
+                      onlyActiveOnIndex={false}
+                      style={Object {}}
+                      to={
+                        Object {
+                          "pathname": "/coding_rules",
+                          "query": Object {
+                            "languages": "",
+                            "types": "SECURITY_HOTSPOT,VULNERABILITY",
+                          },
+                        }
+                      }
+                    >
+                      security_reports.activate_rules.link.1
+                    </Link>
+                  </React.Fragment>
+                }
+              >
+                <PlusCircleIcon
+                  className="vertical-middle"
+                  fill="#4b9fd5"
+                  size={12}
+                />
+              </HelpTooltip>
             </React.Fragment>
           </td>
           <td

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 9b8b5d709cff689814f4b6d7fc6a8d8c6793c403..93e64e0c308392cddda4311f5fe0b52773644c01 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -2057,6 +2057,8 @@ security_reports.line.open=Open
 security_reports.line.wont_fix=Won't Fix
 security_reports.line.in_review=In Review
 security_reports.cwe.show=Show CWE distribution
+security_reports.activate_rules=Activate rules in this category to detect more security hotspots
+security_reports.activate_rules.link=See all {0} rules related to this category
 
 #------------------------------------------------------------------------------
 #