SONAR-11397 Update UI using WS mock

4 files changed, 120 insertions, 16 deletions

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 2dd70f90ee1..025b661e649 100755
--- 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 e566a2405fb..3094cd5554a 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
@@ -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 f61e0fc1a5d..840caeee3a1 100644
--- 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 5c19bde0e7c..33b0ec36961 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
@@ -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