SONAR-11893 Add hotspots to the SQ about page

* Mock Icon components to avoid having SVG data in snapshots

server/sonar-web/src/main/js/apps/about/components/AboutApp.tsx

@@ -115,10 +115,12 @@ export class AboutApp extends React.PureComponent<Props, State> {
     let bugs;
     let vulnerabilities;
     let codeSmells;
+    let securityHotspots;
     if (!loading && issueTypes) {
       bugs = issueTypes['BUG'] && issueTypes['BUG'].count;
       vulnerabilities = issueTypes['VULNERABILITY'] && issueTypes['VULNERABILITY'].count;
       codeSmells = issueTypes['CODE_SMELL'] && issueTypes['CODE_SMELL'].count;
+      securityHotspots = issueTypes['SECURITY_HOTSPOT'] && issueTypes['SECURITY_HOTSPOT'].count;
     }
 
     return (
@@ -149,6 +151,7 @@ export class AboutApp extends React.PureComponent<Props, State> {
                 bugs={bugs}
                 codeSmells={codeSmells}
                 loading={loading}
+                securityHotspots={securityHotspots}
                 vulnerabilities={vulnerabilities}
               />
             </div>

server/sonar-web/src/main/js/apps/about/components/AboutQualityModel.tsx

@@ -22,6 +22,7 @@ import { translate } from '../../../helpers/l10n';
 import BugIcon from '../../../components/icons-components/BugIcon';
 import VulnerabilityIcon from '../../../components/icons-components/VulnerabilityIcon';
 import CodeSmellIcon from '../../../components/icons-components/CodeSmellIcon';
+import SecurityHotspotIcon from '../../../components/icons-components/SecurityHotspotIcon';
 
 export default function AboutQualityModel() {
   return (
@@ -31,6 +32,7 @@ export default function AboutQualityModel() {
       <div className="boxed-group-inner clearfix">
         <div className="flex-columns">
           <div className="flex-column flex-column-third">
+            <h3>{translate('metric_domain.Reliability')}</h3>
             <div className="pull-left little-spacer-right">
               <BugIcon />
             </div>
@@ -41,6 +43,7 @@ export default function AboutQualityModel() {
           </div>
 
           <div className="flex-column flex-column-third">
+            <h3>{translate('metric_domain.Security')}</h3>
             <div className="pull-left little-spacer-right">
               <VulnerabilityIcon />
             </div>
@@ -48,9 +51,18 @@ export default function AboutQualityModel() {
               <strong>{translate('issue.type.VULNERABILITY.plural')}</strong>{' '}
               {translate('about_page.quality_model.vulnerabilities')}
             </p>
+            <br />
+            <div className="pull-left little-spacer-right">
+              <SecurityHotspotIcon />
+            </div>
+            <p className="about-page-text overflow-hidden">
+              <strong>{translate('issue.type.SECURITY_HOTSPOT.plural')}</strong>{' '}
+              {translate('about_page.quality_model.security_hotspots')}
+            </p>
           </div>
 
           <div className="flex-column flex-column-third">
+            <h3>{translate('metric_domain.Maintainability')}</h3>
             <div className="pull-left little-spacer-right">
               <CodeSmellIcon />
             </div>

server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.tsx

@@ -25,15 +25,23 @@ import { getIssuesUrl } from '../../../helpers/urls';
 import BugIcon from '../../../components/icons-components/BugIcon';
 import VulnerabilityIcon from '../../../components/icons-components/VulnerabilityIcon';
 import CodeSmellIcon from '../../../components/icons-components/CodeSmellIcon';
+import SecurityHotspotIcon from '../../../components/icons-components/SecurityHotspotIcon';
 
 interface Props {
   bugs?: number;
   codeSmells?: number;
   loading: boolean;
+  securityHotspots?: number;
   vulnerabilities?: number;
 }
 
-export default function EntryIssueTypes({ bugs, codeSmells, loading, vulnerabilities }: Props) {
+export default function EntryIssueTypes({
+  bugs,
+  codeSmells,
+  loading,
+  securityHotspots,
+  vulnerabilities
+}: Props) {
   return (
     <div className="about-page-projects">
       {loading ? (
@@ -90,6 +98,25 @@ export default function EntryIssueTypes({ bugs, codeSmells, loading, vulnerabili
                 {translate('issue.type.CODE_SMELL.plural')}
               </td>
             </tr>
+            <tr>
+              <td className="about-page-issue-type-number">
+                <Link
+                  className="about-page-issue-type-link"
+                  to={getIssuesUrl({
+                    resolved: 'false',
+                    types: 'SECURITY_HOTSPOT',
+                    s: 'CREATION_DATE'
+                  })}>
+                  {formatMeasure(securityHotspots, 'SHORT_INT')}
+                </Link>
+              </td>
+              <td>
+                <span className="little-spacer-right">
+                  <SecurityHotspotIcon />
+                </span>
+                {translate('issue.type.SECURITY_HOTSPOT.plural')}
+              </td>
+            </tr>
           </tbody>
         </table>
       )}

server/sonar-web/src/main/js/apps/about/components/__tests__/AboutApp-test.tsx

@@ -26,23 +26,30 @@ import { getFacet } from '../../../../api/issues';
 import { mockLocation, mockAppState, mockCurrentUser } from '../../../../helpers/testMocks';
 import { waitAndUpdate } from '../../../../helpers/testUtils';
 
+jest.mock('../../../../components/icons-components/BugIcon');
+jest.mock('../../../../components/icons-components/VulnerabilityIcon');
+jest.mock('../../../../components/icons-components/CodeSmellIcon');
+jest.mock('../../../../components/icons-components/SecurityHotspotIcon');
+jest.mock('../../../../components/icons-components/TagsIcon');
+
 jest.mock('../../../../helpers/pages', () => ({
   addWhitePageClass: jest.fn(),
   removeWhitePageClass: jest.fn()
 }));
 
 jest.mock('../../../../api/components', () => ({
-  searchProjects: jest.fn().mockResolvedValue(5)
+  searchProjects: jest.fn().mockResolvedValue({ paging: { total: 5 } })
 }));
 
 jest.mock('../../../../api/issues', () => ({
-  getFacet: jest
-    .fn()
-    .mockResolvedValue([
-      { facet: { count: 5, val: 'CODE_SMELL' } },
-      { facet: { count: 10, val: 'BUG' } },
-      { facet: { count: 0, val: 'VULNERABILITY' } }
-    ])
+  getFacet: jest.fn().mockResolvedValue({
+    facet: [
+      { count: 5, val: 'CODE_SMELL' },
+      { count: 10, val: 'BUG' },
+      { count: 0, val: 'VULNERABILITY' },
+      { count: 5, val: 'SECURITY_HOTSPOT' }
+    ]
+  })
 }));
 
 jest.mock('../../../../app/components/GlobalContainer', () => ({
@@ -79,7 +86,7 @@ function mountRender(props: Partial<AboutApp['props']> = {}) {
       appState={mockAppState()}
       currentUser={mockCurrentUser()}
       customText="Lorem ipsum"
-      fetchAboutPageSettings={jest.fn()}
+      fetchAboutPageSettings={jest.fn().mockResolvedValue('')}
       location={mockLocation()}
       {...props}
     />

server/sonar-web/src/main/js/apps/about/components/__tests__/__snapshots__/AboutApp-test.tsx.snap

@@ -28,7 +28,7 @@ exports[`should render correctly 1`] = `
       "results": Array [
         Object {
           "type": "return",
-          "value": undefined,
+          "value": Promise {},
         },
       ],
     }
@@ -113,7 +113,7 @@ exports[`should render correctly 1`] = `
           className="about-page-instance"
         >
           <AboutProjects
-            count={0}
+            count={5}
             loading={false}
           >
             <div
@@ -132,7 +132,7 @@ exports[`should render correctly 1`] = `
                       onClick={[Function]}
                       style={Object {}}
                     >
-                      0
+                      5
                     </a>
                   </Link>
                 </div>
@@ -143,7 +143,11 @@ exports[`should render correctly 1`] = `
             </div>
           </AboutProjects>
           <EntryIssueTypes
+            bugs={10}
+            codeSmells={5}
             loading={false}
+            securityHotspots={5}
+            vulnerabilities={0}
           >
             <div
               className="about-page-projects"
@@ -175,42 +179,16 @@ exports[`should render correctly 1`] = `
                           className="about-page-issue-type-link"
                           onClick={[Function]}
                           style={Object {}}
-                        />
+                        >
+                          10
+                        </a>
                       </Link>
                     </td>
                     <td>
                       <span
                         className="little-spacer-right"
                       >
-                        <BugIcon>
-                          <Icon>
-                            <svg
-                              height={16}
-                              style={
-                                Object {
-                                  "clipRule": "evenodd",
-                                  "fillRule": "evenodd",
-                                  "strokeLinejoin": "round",
-                                  "strokeMiterlimit": 1.41421,
-                                }
-                              }
-                              version="1.1"
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlSpace="preserve"
-                              xmlnsXlink="http://www.w3.org/1999/xlink"
-                            >
-                              <path
-                                d="M11 9h1.3l.5.8.8-.5-.8-1.3H11v-.3l2-2.3V3h-1v2l-1 1.2V5c-.1-.8-.7-1.5-1.4-1.9L11 1.8l-.7-.7-1.8 1.6-1.8-1.6-.7.7 1.5 1.3C6.7 3.5 6.1 4.2 6 5v1.1L5 5V3H4v2.3l2 2.3V8H4.2l-.7 1.2.8.5.4-.7H6v.3l-2 1.9V14h1v-2.4l1-1C6 12 7.1 13 8.4 13h.8c.7 0 1.4-.3 1.8-.9.3-.4.3-.9.2-1.4l.9.9V14h1v-2.8l-2-1.9V9zm-2 2H8V6h1v5z"
-                                style={
-                                  Object {
-                                    "fill": "currentColor",
-                                  }
-                                }
-                              />
-                            </svg>
-                          </Icon>
-                        </BugIcon>
+                        <BugIcon />
                       </span>
                       issue.type.BUG.plural
                     </td>
@@ -238,42 +216,16 @@ exports[`should render correctly 1`] = `
                           className="about-page-issue-type-link"
                           onClick={[Function]}
                           style={Object {}}
-                        />
+                        >
+                          0
+                        </a>
                       </Link>
                     </td>
                     <td>
                       <span
                         className="little-spacer-right"
                       >
-                        <VulnerabilityIcon>
-                          <Icon>
-                            <svg
-                              height={16}
-                              style={
-                                Object {
-                                  "clipRule": "evenodd",
-                                  "fillRule": "evenodd",
-                                  "strokeLinejoin": "round",
-                                  "strokeMiterlimit": 1.41421,
-                                }
-                              }
-                              version="1.1"
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlSpace="preserve"
-                              xmlnsXlink="http://www.w3.org/1999/xlink"
-                            >
-                              <path
-                                d="M10.8 5H6V3.9a2.28 2.28 0 0 1 2-2.5 2.22 2.22 0 0 1 1.8 1.2.48.48 0 0 0 .7.2.48.48 0 0 0 .2-.7A3 3 0 0 0 8 .4a3.34 3.34 0 0 0-3 3.5v1.2a2.16 2.16 0 0 0-2 2.1v4.4a2.22 2.22 0 0 0 2.2 2.2h5.6a2.22 2.22 0 0 0 2.2-2.2V7.2A2.22 2.22 0 0 0 10.8 5zm-2.2 5.5v1.2H7.4v-1.2a1.66 1.66 0 0 1-1.1-1.6A1.75 1.75 0 0 1 8 7.2a1.71 1.71 0 0 1 .6 3.3z"
-                                style={
-                                  Object {
-                                    "fill": "currentColor",
-                                  }
-                                }
-                              />
-                            </svg>
-                          </Icon>
-                        </VulnerabilityIcon>
+                        <VulnerabilityIcon />
                       </span>
                       issue.type.VULNERABILITY.plural
                     </td>
@@ -301,46 +253,57 @@ exports[`should render correctly 1`] = `
                           className="about-page-issue-type-link"
                           onClick={[Function]}
                           style={Object {}}
-                        />
+                        >
+                          5
+                        </a>
                       </Link>
                     </td>
                     <td>
                       <span
                         className="little-spacer-right"
                       >
-                        <CodeSmellIcon>
-                          <Icon>
-                            <svg
-                              height={16}
-                              style={
-                                Object {
-                                  "clipRule": "evenodd",
-                                  "fillRule": "evenodd",
-                                  "strokeLinejoin": "round",
-                                  "strokeMiterlimit": 1.41421,
-                                }
-                              }
-                              version="1.1"
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlSpace="preserve"
-                              xmlnsXlink="http://www.w3.org/1999/xlink"
-                            >
-                              <path
-                                d="M8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm-.5 5.5h.9v.9h-.9v-.9zm-3.8.2c-.1 0-.2-.1-.2-.2 0-.4.1-1.2.6-2S5.3 4.2 5.6 4c.2 0 .3 0 .3.1l1.3 2.3c0 .1 0 .2-.1.2-.1.2-.2.3-.3.5-.1.2-.2.4-.2.5 0 .1-.1.2-.2.2l-2.7-.1zM9.9 12c-.3.2-1.1.5-2 .5-.9 0-1.7-.3-2-.5-.1 0-.1-.2-.1-.3l1.3-2.3c0-.1.1-.1.2-.1.2.1.3.1.5.1s.4 0 .5-.1c.1 0 .2 0 .2.1l1.3 2.3c.2.2.2.3.1.3zm2.5-4.1L9.7 8c-.1 0-.2-.1-.2-.2 0-.2-.1-.4-.2-.5 0-.1-.2-.3-.3-.4-.1 0-.1-.1-.1-.2l1.3-2.3c.1-.1.2-.1.3-.1.3.2 1 .7 1.5 1.5s.6 1.6.6 2c0 0-.1.1-.2.1z"
-                                style={
-                                  Object {
-                                    "fill": "currentColor",
-                                  }
-                                }
-                              />
-                            </svg>
-                          </Icon>
-                        </CodeSmellIcon>
+                        <CodeSmellIcon />
                       </span>
                       issue.type.CODE_SMELL.plural
                     </td>
                   </tr>
+                  <tr>
+                    <td
+                      className="about-page-issue-type-number"
+                    >
+                      <Link
+                        className="about-page-issue-type-link"
+                        onlyActiveOnIndex={false}
+                        style={Object {}}
+                        to={
+                          Object {
+                            "pathname": "/issues",
+                            "query": Object {
+                              "resolved": "false",
+                              "s": "CREATION_DATE",
+                              "types": "SECURITY_HOTSPOT",
+                            },
+                          }
+                        }
+                      >
+                        <a
+                          className="about-page-issue-type-link"
+                          onClick={[Function]}
+                          style={Object {}}
+                        >
+                          5
+                        </a>
+                      </Link>
+                    </td>
+                    <td>
+                      <span
+                        className="little-spacer-right"
+                      >
+                        <SecurityHotspotIcon />
+                      </span>
+                      issue.type.SECURITY_HOTSPOT.plural
+                    </td>
+                  </tr>
                 </tbody>
               </table>
             </div>
@@ -553,38 +516,13 @@ exports[`should render correctly 1`] = `
               <div
                 className="flex-column flex-column-third"
               >
+                <h3>
+                  metric_domain.Reliability
+                </h3>
                 <div
                   className="pull-left little-spacer-right"
                 >
-                  <BugIcon>
-                    <Icon>
-                      <svg
-                        height={16}
-                        style={
-                          Object {
-                            "clipRule": "evenodd",
-                            "fillRule": "evenodd",
-                            "strokeLinejoin": "round",
-                            "strokeMiterlimit": 1.41421,
-                          }
-                        }
-                        version="1.1"
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlSpace="preserve"
-                        xmlnsXlink="http://www.w3.org/1999/xlink"
-                      >
-                        <path
-                          d="M11 9h1.3l.5.8.8-.5-.8-1.3H11v-.3l2-2.3V3h-1v2l-1 1.2V5c-.1-.8-.7-1.5-1.4-1.9L11 1.8l-.7-.7-1.8 1.6-1.8-1.6-.7.7 1.5 1.3C6.7 3.5 6.1 4.2 6 5v1.1L5 5V3H4v2.3l2 2.3V8H4.2l-.7 1.2.8.5.4-.7H6v.3l-2 1.9V14h1v-2.4l1-1C6 12 7.1 13 8.4 13h.8c.7 0 1.4-.3 1.8-.9.3-.4.3-.9.2-1.4l.9.9V14h1v-2.8l-2-1.9V9zm-2 2H8V6h1v5z"
-                          style={
-                            Object {
-                              "fill": "currentColor",
-                            }
-                          }
-                        />
-                      </svg>
-                    </Icon>
-                  </BugIcon>
+                  <BugIcon />
                 </div>
                 <p
                   className="about-page-text overflow-hidden"
@@ -599,38 +537,13 @@ exports[`should render correctly 1`] = `
               <div
                 className="flex-column flex-column-third"
               >
+                <h3>
+                  metric_domain.Security
+                </h3>
                 <div
                   className="pull-left little-spacer-right"
                 >
-                  <VulnerabilityIcon>
-                    <Icon>
-                      <svg
-                        height={16}
-                        style={
-                          Object {
-                            "clipRule": "evenodd",
-                            "fillRule": "evenodd",
-                            "strokeLinejoin": "round",
-                            "strokeMiterlimit": 1.41421,
-                          }
-                        }
-                        version="1.1"
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlSpace="preserve"
-                        xmlnsXlink="http://www.w3.org/1999/xlink"
-                      >
-                        <path
-                          d="M10.8 5H6V3.9a2.28 2.28 0 0 1 2-2.5 2.22 2.22 0 0 1 1.8 1.2.48.48 0 0 0 .7.2.48.48 0 0 0 .2-.7A3 3 0 0 0 8 .4a3.34 3.34 0 0 0-3 3.5v1.2a2.16 2.16 0 0 0-2 2.1v4.4a2.22 2.22 0 0 0 2.2 2.2h5.6a2.22 2.22 0 0 0 2.2-2.2V7.2A2.22 2.22 0 0 0 10.8 5zm-2.2 5.5v1.2H7.4v-1.2a1.66 1.66 0 0 1-1.1-1.6A1.75 1.75 0 0 1 8 7.2a1.71 1.71 0 0 1 .6 3.3z"
-                          style={
-                            Object {
-                              "fill": "currentColor",
-                            }
-                          }
-                        />
-                      </svg>
-                    </Icon>
-                  </VulnerabilityIcon>
+                  <VulnerabilityIcon />
                 </div>
                 <p
                   className="about-page-text overflow-hidden"
@@ -641,42 +554,32 @@ exports[`should render correctly 1`] = `
                    
                   about_page.quality_model.vulnerabilities
                 </p>
+                <br />
+                <div
+                  className="pull-left little-spacer-right"
+                >
+                  <SecurityHotspotIcon />
+                </div>
+                <p
+                  className="about-page-text overflow-hidden"
+                >
+                  <strong>
+                    issue.type.SECURITY_HOTSPOT.plural
+                  </strong>
+                   
+                  about_page.quality_model.security_hotspots
+                </p>
               </div>
               <div
                 className="flex-column flex-column-third"
               >
+                <h3>
+                  metric_domain.Maintainability
+                </h3>
                 <div
                   className="pull-left little-spacer-right"
                 >
-                  <CodeSmellIcon>
-                    <Icon>
-                      <svg
-                        height={16}
-                        style={
-                          Object {
-                            "clipRule": "evenodd",
-                            "fillRule": "evenodd",
-                            "strokeLinejoin": "round",
-                            "strokeMiterlimit": 1.41421,
-                          }
-                        }
-                        version="1.1"
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlSpace="preserve"
-                        xmlnsXlink="http://www.w3.org/1999/xlink"
-                      >
-                        <path
-                          d="M8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm-.5 5.5h.9v.9h-.9v-.9zm-3.8.2c-.1 0-.2-.1-.2-.2 0-.4.1-1.2.6-2S5.3 4.2 5.6 4c.2 0 .3 0 .3.1l1.3 2.3c0 .1 0 .2-.1.2-.1.2-.2.3-.3.5-.1.2-.2.4-.2.5 0 .1-.1.2-.2.2l-2.7-.1zM9.9 12c-.3.2-1.1.5-2 .5-.9 0-1.7-.3-2-.5-.1 0-.1-.2-.1-.3l1.3-2.3c0-.1.1-.1.2-.1.2.1.3.1.5.1s.4 0 .5-.1c.1 0 .2 0 .2.1l1.3 2.3c.2.2.2.3.1.3zm2.5-4.1L9.7 8c-.1 0-.2-.1-.2-.2 0-.2-.1-.4-.2-.5 0-.1-.2-.3-.3-.4-.1 0-.1-.1-.1-.2l1.3-2.3c.1-.1.2-.1.3-.1.3.2 1 .7 1.5 1.5s.6 1.6.6 2c0 0-.1.1-.2.1z"
-                          style={
-                            Object {
-                              "fill": "currentColor",
-                            }
-                          }
-                        />
-                      </svg>
-                    </Icon>
-                  </CodeSmellIcon>
+                  <CodeSmellIcon />
                 </div>
                 <p
                   className="about-page-text overflow-hidden"
@@ -875,35 +778,7 @@ exports[`should render correctly 1`] = `
                           onClick={[Function]}
                           style={Object {}}
                         >
-                          <TagsIcon>
-                            <Icon>
-                              <svg
-                                height={16}
-                                style={
-                                  Object {
-                                    "clipRule": "evenodd",
-                                    "fillRule": "evenodd",
-                                    "strokeLinejoin": "round",
-                                    "strokeMiterlimit": 1.41421,
-                                  }
-                                }
-                                version="1.1"
-                                viewBox="0 0 16 16"
-                                width={16}
-                                xmlSpace="preserve"
-                                xmlnsXlink="http://www.w3.org/1999/xlink"
-                              >
-                                <path
-                                  d="M4.303 5.36a.94.94 0 0 0-.944-.945.94.94 0 0 0-.944.944c0 .524.42.944.944.944a.94.94 0 0 0 .944-.944zm7.866 4.246a.95.95 0 0 1-.273.663l-3.62 3.627a.95.95 0 0 1-1.334 0L1.671 8.618C1.295 8.249 1 7.534 1 7.01V3.944A.95.95 0 0 1 1.944 3H5.01c.523 0 1.238.295 1.614.67l5.271 5.265a.98.98 0 0 1 .273.67zm2.831 0a.95.95 0 0 1-.273.663l-3.62 3.627a.98.98 0 0 1-.67.273c-.384 0-.575-.177-.826-.435l3.465-3.465a.95.95 0 0 0 0-1.334L7.805 3.67C7.429 3.295 6.714 3 6.19 3h1.651c.524 0 1.239.295 1.615.67l5.271 5.265a.98.98 0 0 1 .273.67z"
-                                  style={
-                                    Object {
-                                      "fill": "currentColor",
-                                    }
-                                  }
-                                />
-                              </svg>
-                            </Icon>
-                          </TagsIcon>
+                          <TagsIcon />
                           <span
                             className="little-spacer-left"
                           >
@@ -931,35 +806,7 @@ exports[`should render correctly 1`] = `
                           onClick={[Function]}
                           style={Object {}}
                         >
-                          <TagsIcon>
-                            <Icon>
-                              <svg
-                                height={16}
-                                style={
-                                  Object {
-                                    "clipRule": "evenodd",
-                                    "fillRule": "evenodd",
-                                    "strokeLinejoin": "round",
-                                    "strokeMiterlimit": 1.41421,
-                                  }
-                                }
-                                version="1.1"
-                                viewBox="0 0 16 16"
-                                width={16}
-                                xmlSpace="preserve"
-                                xmlnsXlink="http://www.w3.org/1999/xlink"
-                              >
-                                <path
-                                  d="M4.303 5.36a.94.94 0 0 0-.944-.945.94.94 0 0 0-.944.944c0 .524.42.944.944.944a.94.94 0 0 0 .944-.944zm7.866 4.246a.95.95 0 0 1-.273.663l-3.62 3.627a.95.95 0 0 1-1.334 0L1.671 8.618C1.295 8.249 1 7.534 1 7.01V3.944A.95.95 0 0 1 1.944 3H5.01c.523 0 1.238.295 1.614.67l5.271 5.265a.98.98 0 0 1 .273.67zm2.831 0a.95.95 0 0 1-.273.663l-3.62 3.627a.98.98 0 0 1-.67.273c-.384 0-.575-.177-.826-.435l3.465-3.465a.95.95 0 0 0 0-1.334L7.805 3.67C7.429 3.295 6.714 3 6.19 3h1.651c.524 0 1.239.295 1.615.67l5.271 5.265a.98.98 0 0 1 .273.67z"
-                                  style={
-                                    Object {
-                                      "fill": "currentColor",
-                                    }
-                                  }
-                                />
-                              </svg>
-                            </Icon>
-                          </TagsIcon>
+                          <TagsIcon />
                           <span
                             className="little-spacer-left"
                           >
@@ -987,35 +834,7 @@ exports[`should render correctly 1`] = `
                           onClick={[Function]}
                           style={Object {}}
                         >
-                          <TagsIcon>
-                            <Icon>
-                              <svg
-                                height={16}
-                                style={
-                                  Object {
-                                    "clipRule": "evenodd",
-                                    "fillRule": "evenodd",
-                                    "strokeLinejoin": "round",
-                                    "strokeMiterlimit": 1.41421,
-                                  }
-                                }
-                                version="1.1"
-                                viewBox="0 0 16 16"
-                                width={16}
-                                xmlSpace="preserve"
-                                xmlnsXlink="http://www.w3.org/1999/xlink"
-                              >
-                                <path
-                                  d="M4.303 5.36a.94.94 0 0 0-.944-.945.94.94 0 0 0-.944.944c0 .524.42.944.944.944a.94.94 0 0 0 .944-.944zm7.866 4.246a.95.95 0 0 1-.273.663l-3.62 3.627a.95.95 0 0 1-1.334 0L1.671 8.618C1.295 8.249 1 7.534 1 7.01V3.944A.95.95 0 0 1 1.944 3H5.01c.523 0 1.238.295 1.614.67l5.271 5.265a.98.98 0 0 1 .273.67zm2.831 0a.95.95 0 0 1-.273.663l-3.62 3.627a.98.98 0 0 1-.67.273c-.384 0-.575-.177-.826-.435l3.465-3.465a.95.95 0 0 0 0-1.334L7.805 3.67C7.429 3.295 6.714 3 6.19 3h1.651c.524 0 1.239.295 1.615.67l5.271 5.265a.98.98 0 0 1 .273.67z"
-                                  style={
-                                    Object {
-                                      "fill": "currentColor",
-                                    }
-                                  }
-                                />
-                              </svg>
-                            </Icon>
-                          </TagsIcon>
+                          <TagsIcon />
                           <span
                             className="little-spacer-left"
                           >
@@ -1043,35 +862,7 @@ exports[`should render correctly 1`] = `
                           onClick={[Function]}
                           style={Object {}}
                         >
-                          <TagsIcon>
-                            <Icon>
-                              <svg
-                                height={16}
-                                style={
-                                  Object {
-                                    "clipRule": "evenodd",
-                                    "fillRule": "evenodd",
-                                    "strokeLinejoin": "round",
-                                    "strokeMiterlimit": 1.41421,
-                                  }
-                                }
-                                version="1.1"
-                                viewBox="0 0 16 16"
-                                width={16}
-                                xmlSpace="preserve"
-                                xmlnsXlink="http://www.w3.org/1999/xlink"
-                              >
-                                <path
-                                  d="M4.303 5.36a.94.94 0 0 0-.944-.945.94.94 0 0 0-.944.944c0 .524.42.944.944.944a.94.94 0 0 0 .944-.944zm7.866 4.246a.95.95 0 0 1-.273.663l-3.62 3.627a.95.95 0 0 1-1.334 0L1.671 8.618C1.295 8.249 1 7.534 1 7.01V3.944A.95.95 0 0 1 1.944 3H5.01c.523 0 1.238.295 1.614.67l5.271 5.265a.98.98 0 0 1 .273.67zm2.831 0a.95.95 0 0 1-.273.663l-3.62 3.627a.98.98 0 0 1-.67.273c-.384 0-.575-.177-.826-.435l3.465-3.465a.95.95 0 0 0 0-1.334L7.805 3.67C7.429 3.295 6.714 3 6.19 3h1.651c.524 0 1.239.295 1.615.67l5.271 5.265a.98.98 0 0 1 .273.67z"
-                                  style={
-                                    Object {
-                                      "fill": "currentColor",
-                                    }
-                                  }
-                                />
-                              </svg>
-                            </Icon>
-                          </TagsIcon>
+                          <TagsIcon />
                           <span
                             className="little-spacer-left"
                           >
@@ -1099,35 +890,7 @@ exports[`should render correctly 1`] = `
                           onClick={[Function]}
                           style={Object {}}
                         >
-                          <TagsIcon>
-                            <Icon>
-                              <svg
-                                height={16}
-                                style={
-                                  Object {
-                                    "clipRule": "evenodd",
-                                    "fillRule": "evenodd",
-                                    "strokeLinejoin": "round",
-                                    "strokeMiterlimit": 1.41421,
-                                  }
-                                }
-                                version="1.1"
-                                viewBox="0 0 16 16"
-                                width={16}
-                                xmlSpace="preserve"
-                                xmlnsXlink="http://www.w3.org/1999/xlink"
-                              >
-                                <path
-                                  d="M4.303 5.36a.94.94 0 0 0-.944-.945.94.94 0 0 0-.944.944c0 .524.42.944.944.944a.94.94 0 0 0 .944-.944zm7.866 4.246a.95.95 0 0 1-.273.663l-3.62 3.627a.95.95 0 0 1-1.334 0L1.671 8.618C1.295 8.249 1 7.534 1 7.01V3.944A.95.95 0 0 1 1.944 3H5.01c.523 0 1.238.295 1.614.67l5.271 5.265a.98.98 0 0 1 .273.67zm2.831 0a.95.95 0 0 1-.273.663l-3.62 3.627a.98.98 0 0 1-.67.273c-.384 0-.575-.177-.826-.435l3.465-3.465a.95.95 0 0 0 0-1.334L7.805 3.67C7.429 3.295 6.714 3 6.19 3h1.651c.524 0 1.239.295 1.615.67l5.271 5.265a.98.98 0 0 1 .273.67z"
-                                  style={
-                                    Object {
-                                      "fill": "currentColor",
-                                    }
-                                  }
-                                />
-                              </svg>
-                            </Icon>
-                          </TagsIcon>
+                          <TagsIcon />
                           <span
                             className="little-spacer-left"
                           >

server/sonar-web/src/main/js/apps/about/styles.css

@@ -35,6 +35,12 @@
   padding-top: 25px;
 }
 
+.about-page .boxed-group h3 {
+  font-weight: normal;
+  font-size: var(--bigFontSize);
+  padding-bottom: calc(1.5 * var(--gridSize));
+}
+
 .about-page .boxed-group-inner {
   padding-left: 0;
   padding-right: 0;

server/sonar-web/src/main/js/apps/groups/components/__tests__/EditMembers-test.tsx

@@ -22,6 +22,9 @@ import { mount } from 'enzyme';
 import EditMembers from '../EditMembers';
 import { click, waitAndUpdate } from '../../../../helpers/testUtils';
 
+jest.mock('../../../../components/icons-components/SearchIcon');
+jest.mock('../../../../components/icons-components/BulletListIcon');
+
 it('should edit members', async () => {
   const group = { id: 3, name: 'Foo', membersCount: 5 };
   const onEdit = jest.fn();

server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/EditMembers-test.tsx.snap

@@ -36,35 +36,7 @@ exports[`should edit members 1`] = `
         }
         type="button"
       >
-        <BulletListIcon>
-          <Icon>
-            <svg
-              height={16}
-              style={
-                Object {
-                  "clipRule": "evenodd",
-                  "fillRule": "evenodd",
-                  "strokeLinejoin": "round",
-                  "strokeMiterlimit": 1.41421,
-                }
-              }
-              version="1.1"
-              viewBox="0 0 16 16"
-              width={16}
-              xmlSpace="preserve"
-              xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                d="M2.968 11.274v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM2.968 8.255v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM2.968 5.235v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM15.045 11.274v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177zM2.968 2.216v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM15.045 8.255v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177zM15.045 5.235v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177zM15.045 2.216v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </Icon>
-        </BulletListIcon>
+        <BulletListIcon />
       </button>
     </Button>
   </ButtonIcon>
@@ -107,35 +79,7 @@ exports[`should edit members 2`] = `
         }
         type="button"
       >
-        <BulletListIcon>
-          <Icon>
-            <svg
-              height={16}
-              style={
-                Object {
-                  "clipRule": "evenodd",
-                  "fillRule": "evenodd",
-                  "strokeLinejoin": "round",
-                  "strokeMiterlimit": 1.41421,
-                }
-              }
-              version="1.1"
-              viewBox="0 0 16 16"
-              width={16}
-              xmlSpace="preserve"
-              xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                d="M2.968 11.274v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM2.968 8.255v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM2.968 5.235v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM15.045 11.274v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177zM2.968 2.216v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM15.045 8.255v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177zM15.045 5.235v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177zM15.045 2.216v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </Icon>
-        </BulletListIcon>
+        <BulletListIcon />
       </button>
     </Button>
   </ButtonIcon>
@@ -258,21 +202,6 @@ exports[`should edit members 2`] = `
                             type="search"
                             value=""
                           />
-                          <svg
-                            class="search-box-magnifier"
-                            height="16"
-                            style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 1.41421;"
-                            version="1.1"
-                            viewBox="0 0 16 16"
-                            width="16"
-                            xml:space="preserve"
-                            xmlns:xlink="http://www.w3.org/1999/xlink"
-                          >
-                            <path
-                              d="M10.308 7.077c0-.89-.316-1.65-.949-2.283a3.111 3.111 0 0 0-2.282-.948c-.89 0-1.65.316-2.283.948a3.111 3.111 0 0 0-.948 2.283c0 .89.316 1.65.948 2.282a3.111 3.111 0 0 0 2.283.949c.89 0 1.65-.316 2.282-.949a3.111 3.111 0 0 0 .949-2.282zm3.692 6c0 .25-.091.466-.274.649a.887.887 0 0 1-.65.274.857.857 0 0 1-.648-.274L9.954 11.26c-.86.596-1.82.894-2.877.894a4.989 4.989 0 0 1-1.972-.4 5.076 5.076 0 0 1-1.623-1.082A5.076 5.076 0 0 1 2.4 9.049 4.989 4.989 0 0 1 2 7.077c0-.688.133-1.345.4-1.972a5.076 5.076 0 0 1 1.082-1.623A5.076 5.076 0 0 1 5.105 2.4 4.989 4.989 0 0 1 7.077 2c.687 0 1.345.133 1.972.4a5.076 5.076 0 0 1 1.623 1.082c.454.454.815.995 1.082 1.623.266.627.4 1.284.4 1.972a4.938 4.938 0 0 1-.894 2.877l2.473 2.474a.883.883 0 0 1 .267.649z"
-                              style="fill: currentColor;"
-                            />
-                          </svg>
                           
                         </div>
                       </div>
@@ -514,38 +443,7 @@ exports[`should edit members 2`] = `
                               >
                                 <SearchIcon
                                   className="search-box-magnifier"
-                                >
-                                  <Icon
-                                    className="search-box-magnifier"
-                                  >
-                                    <svg
-                                      className="search-box-magnifier"
-                                      height={16}
-                                      style={
-                                        Object {
-                                          "clipRule": "evenodd",
-                                          "fillRule": "evenodd",
-                                          "strokeLinejoin": "round",
-                                          "strokeMiterlimit": 1.41421,
-                                        }
-                                      }
-                                      version="1.1"
-                                      viewBox="0 0 16 16"
-                                      width={16}
-                                      xmlSpace="preserve"
-                                      xmlnsXlink="http://www.w3.org/1999/xlink"
-                                    >
-                                      <path
-                                        d="M10.308 7.077c0-.89-.316-1.65-.949-2.283a3.111 3.111 0 0 0-2.282-.948c-.89 0-1.65.316-2.283.948a3.111 3.111 0 0 0-.948 2.283c0 .89.316 1.65.948 2.282a3.111 3.111 0 0 0 2.283.949c.89 0 1.65-.316 2.282-.949a3.111 3.111 0 0 0 .949-2.282zm3.692 6c0 .25-.091.466-.274.649a.887.887 0 0 1-.65.274.857.857 0 0 1-.648-.274L9.954 11.26c-.86.596-1.82.894-2.877.894a4.989 4.989 0 0 1-1.972-.4 5.076 5.076 0 0 1-1.623-1.082A5.076 5.076 0 0 1 2.4 9.049 4.989 4.989 0 0 1 2 7.077c0-.688.133-1.345.4-1.972a5.076 5.076 0 0 1 1.082-1.623A5.076 5.076 0 0 1 5.105 2.4 4.989 4.989 0 0 1 7.077 2c.687 0 1.345.133 1.972.4a5.076 5.076 0 0 1 1.623 1.082c.454.454.815.995 1.082 1.623.266.627.4 1.284.4 1.972a4.938 4.938 0 0 1-.894 2.877l2.473 2.474a.883.883 0 0 1 .267.649z"
-                                        style={
-                                          Object {
-                                            "fill": "currentColor",
-                                          }
-                                        }
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </SearchIcon>
+                                />
                               </DeferredSpinner>
                             </div>
                           </SearchBox>
@@ -655,35 +553,7 @@ exports[`should edit members 3`] = `
         }
         type="button"
       >
-        <BulletListIcon>
-          <Icon>
-            <svg
-              height={16}
-              style={
-                Object {
-                  "clipRule": "evenodd",
-                  "fillRule": "evenodd",
-                  "strokeLinejoin": "round",
-                  "strokeMiterlimit": 1.41421,
-                }
-              }
-              version="1.1"
-              viewBox="0 0 16 16"
-              width={16}
-              xmlSpace="preserve"
-              xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                d="M2.968 11.274v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM2.968 8.255v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM2.968 5.235v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM15.045 11.274v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177zM2.968 2.216v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM15.045 8.255v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177zM15.045 5.235v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177zM15.045 2.216v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </Icon>
-        </BulletListIcon>
+        <BulletListIcon />
       </button>
     </Button>
   </ButtonIcon>

server/sonar-web/src/main/js/apps/overview/main/__tests__/Bugs-test.tsx

@@ -29,6 +29,14 @@ import {
   mockMetric
 } from '../../../../helpers/testMocks';
 
+jest.mock('../../../../components/icons-components/BugIcon', () => ({
+  default: ({ className }: any) => <svg className={className} data-mocked-icon="BugIcon" />
+}));
+
+jest.mock('../../../../components/icons-components/HistoryIcon', () => ({
+  default: ({ className }: any) => <svg className={className} data-mocked-icon="HistoryIcon" />
+}));
+
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot();
 });

server/sonar-web/src/main/js/apps/overview/main/__tests__/CodeSmells-test.tsx

@@ -28,6 +28,14 @@ import {
   mockMetric
 } from '../../../../helpers/testMocks';
 
+jest.mock('../../../../components/icons-components/CodeSmellIcon', () => ({
+  default: ({ className }: any) => <svg className={className} data-mocked-icon="CodeSmellIcon" />
+}));
+
+jest.mock('../../../../components/icons-components/HistoryIcon', () => ({
+  default: ({ className }: any) => <svg className={className} data-mocked-icon="HistoryIcon" />
+}));
+
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot();
 });

server/sonar-web/src/main/js/apps/overview/main/__tests__/Coverage-test.tsx

@@ -28,6 +28,14 @@ import {
   mockMetric
 } from '../../../../helpers/testMocks';
 
+jest.mock('../../../../components/ui/CoverageRating', () => ({
+  default: () => <svg data-mocked-element="CoverageRating" />
+}));
+
+jest.mock('../../../../components/icons-components/HistoryIcon', () => ({
+  default: ({ className }: any) => <svg className={className} data-mocked-icon="HistoryIcon" />
+}));
+
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot();
 });

server/sonar-web/src/main/js/apps/overview/main/__tests__/Duplications-test.tsx

@@ -28,6 +28,14 @@ import {
   mockMetric
 } from '../../../../helpers/testMocks';
 
+jest.mock('../../../../components/ui/DuplicationsRating', () => ({
+  default: () => <svg data-mocked-element="DuplicationsRating" />
+}));
+
+jest.mock('../../../../components/icons-components/HistoryIcon', () => ({
+  default: ({ className }: any) => <svg className={className} data-mocked-icon="HistoryIcon" />
+}));
+
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot();
 });

server/sonar-web/src/main/js/apps/overview/main/__tests__/VulnerabilitiesAndHotspots-test.tsx

@@ -28,6 +28,22 @@ import {
   mockMetric
 } from '../../../../helpers/testMocks';
 
+jest.mock('../../../../components/icons-components/VulnerabilityIcon', () => ({
+  default: ({ className }: any) => (
+    <svg className={className} data-mocked-icon="VulnerabilityIcon" />
+  )
+}));
+
+jest.mock('../../../../components/icons-components/SecurityHotspotIcon', () => ({
+  default: ({ className }: any) => (
+    <svg className={className} data-mocked-icon="SecurityHotspotIcon" />
+  )
+}));
+
+jest.mock('../../../../components/icons-components/HistoryIcon', () => ({
+  default: ({ className }: any) => <svg className={className} data-mocked-icon="HistoryIcon" />
+}));
+
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot();
 });

server/sonar-web/src/main/js/apps/overview/main/__tests__/__snapshots__/Bugs-test.tsx.snap

@@ -62,38 +62,16 @@ exports[`should render correctly 1`] = `
           >
             <svg
               class="little-spacer-right "
-              height="16"
-              space="preserve"
-              style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16"
-              xlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                d="M11 9h1.3l.5.8.8-.5-.8-1.3H11v-.3l2-2.3V3h-1v2l-1 1.2V5c-.1-.8-.7-1.5-1.4-1.9L11 1.8l-.7-.7-1.8 1.6-1.8-1.6-.7.7 1.5 1.3C6.7 3.5 6.1 4.2 6 5v1.1L5 5V3H4v2.3l2 2.3V8H4.2l-.7 1.2.8.5.4-.7H6v.3l-2 1.9V14h1v-2.4l1-1C6 12 7.1 13 8.4 13h.8c.7 0 1.4-.3 1.8-.9.3-.4.3-.9.2-1.4l.9.9V14h1v-2.8l-2-1.9V9zm-2 2H8V6h1v5z"
-                style="fill:currentColor"
-              />
-            </svg>
+              data-mocked-icon="BugIcon"
+            />
             overview.metric.bugs
           </div>
           <a
             class="overview-domain-measure-history-link"
           >
             <svg
-              height="16"
-              space="preserve"
-              style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16"
-              xlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                d="M14.7 3.4v3.3c0 .1 0 .2-.1.2s-.2 0-.3-.1l-.9-.9-4.8 4.8c-.1.1-.1.1-.2.1s-.1 0-.2-.1L6.4 9l-3.2 3.2-1.5-1.5 4.5-4.5c.1-.1.1-.1.2-.1s.1 0 .2.1L8.4 8l3.5-3.5-.9-1c-.1-.1-.1-.2-.1-.3s.1-.1.2-.1h3.3c.1 0 .1 0 .2.1.1 0 .1.1.1.2z"
-                style="fill:currentColor"
-              />
-            </svg>
+              data-mocked-icon="HistoryIcon"
+            />
             <span>
               project_activity.page
             </span>
@@ -154,19 +132,8 @@ exports[`should render correctly 1`] = `
           >
             <svg
               class="little-spacer-right"
-              height="16"
-              space="preserve"
-              style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16"
-              xlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                d="M11 9h1.3l.5.8.8-.5-.8-1.3H11v-.3l2-2.3V3h-1v2l-1 1.2V5c-.1-.8-.7-1.5-1.4-1.9L11 1.8l-.7-.7-1.8 1.6-1.8-1.6-.7.7 1.5 1.3C6.7 3.5 6.1 4.2 6 5v1.1L5 5V3H4v2.3l2 2.3V8H4.2l-.7 1.2.8.5.4-.7H6v.3l-2 1.9V14h1v-2.4l1-1C6 12 7.1 13 8.4 13h.8c.7 0 1.4-.3 1.8-.9.3-.4.3-.9.2-1.4l.9.9V14h1v-2.8l-2-1.9V9zm-2 2H8V6h1v5z"
-                style="fill:currentColor"
-              />
-            </svg>
+              data-mocked-icon="BugIcon"
+            />
             overview.metric.new_bugs
           </div>
         </div>

server/sonar-web/src/main/js/apps/overview/main/__tests__/__snapshots__/CodeSmells-test.tsx.snap

@@ -67,19 +67,8 @@ exports[`should render correctly 1`] = `
             class="overview-domain-measure-history-link"
           >
             <svg
-              height="16"
-              space="preserve"
-              style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16"
-              xlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                d="M14.7 3.4v3.3c0 .1 0 .2-.1.2s-.2 0-.3-.1l-.9-.9-4.8 4.8c-.1.1-.1.1-.2.1s-.1 0-.2-.1L6.4 9l-3.2 3.2-1.5-1.5 4.5-4.5c.1-.1.1-.1.2-.1s.1 0 .2.1L8.4 8l3.5-3.5-.9-1c-.1-.1-.1-.2-.1-.3s.1-.1.2-.1h3.3c.1 0 .1 0 .2.1.1 0 .1.1.1.2z"
-                style="fill:currentColor"
-              />
-            </svg>
+              data-mocked-icon="HistoryIcon"
+            />
             <span>
               project_activity.page
             </span>
@@ -100,38 +89,16 @@ exports[`should render correctly 1`] = `
           >
             <svg
               class="little-spacer-right "
-              height="16"
-              space="preserve"
-              style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16"
-              xlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                d="M8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm-.5 5.5h.9v.9h-.9v-.9zm-3.8.2c-.1 0-.2-.1-.2-.2 0-.4.1-1.2.6-2S5.3 4.2 5.6 4c.2 0 .3 0 .3.1l1.3 2.3c0 .1 0 .2-.1.2-.1.2-.2.3-.3.5-.1.2-.2.4-.2.5 0 .1-.1.2-.2.2l-2.7-.1zM9.9 12c-.3.2-1.1.5-2 .5-.9 0-1.7-.3-2-.5-.1 0-.1-.2-.1-.3l1.3-2.3c0-.1.1-.1.2-.1.2.1.3.1.5.1s.4 0 .5-.1c.1 0 .2 0 .2.1l1.3 2.3c.2.2.2.3.1.3zm2.5-4.1L9.7 8c-.1 0-.2-.1-.2-.2 0-.2-.1-.4-.2-.5 0-.1-.2-.3-.3-.4-.1 0-.1-.1-.1-.2l1.3-2.3c.1-.1.2-.1.3-.1.3.2 1 .7 1.5 1.5s.6 1.6.6 2c0 0-.1.1-.2.1z"
-                style="fill:currentColor"
-              />
-            </svg>
+              data-mocked-icon="CodeSmellIcon"
+            />
             overview.metric.code_smells
           </div>
           <a
             class="overview-domain-measure-history-link"
           >
             <svg
-              height="16"
-              space="preserve"
-              style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16"
-              xlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                d="M14.7 3.4v3.3c0 .1 0 .2-.1.2s-.2 0-.3-.1l-.9-.9-4.8 4.8c-.1.1-.1.1-.2.1s-.1 0-.2-.1L6.4 9l-3.2 3.2-1.5-1.5 4.5-4.5c.1-.1.1-.1.2-.1s.1 0 .2.1L8.4 8l3.5-3.5-.9-1c-.1-.1-.1-.2-.1-.3s.1-.1.2-.1h3.3c.1 0 .1 0 .2.1.1 0 .1.1.1.2z"
-                style="fill:currentColor"
-              />
-            </svg>
+              data-mocked-icon="HistoryIcon"
+            />
             <span>
               project_activity.page
             </span>
@@ -197,19 +164,8 @@ exports[`should render correctly 1`] = `
           >
             <svg
               class="little-spacer-right"
-              height="16"
-              space="preserve"
-              style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16"
-              xlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                d="M8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm-.5 5.5h.9v.9h-.9v-.9zm-3.8.2c-.1 0-.2-.1-.2-.2 0-.4.1-1.2.6-2S5.3 4.2 5.6 4c.2 0 .3 0 .3.1l1.3 2.3c0 .1 0 .2-.1.2-.1.2-.2.3-.3.5-.1.2-.2.4-.2.5 0 .1-.1.2-.2.2l-2.7-.1zM9.9 12c-.3.2-1.1.5-2 .5-.9 0-1.7-.3-2-.5-.1 0-.1-.2-.1-.3l1.3-2.3c0-.1.1-.1.2-.1.2.1.3.1.5.1s.4 0 .5-.1c.1 0 .2 0 .2.1l1.3 2.3c.2.2.2.3.1.3zm2.5-4.1L9.7 8c-.1 0-.2-.1-.2-.2 0-.2-.1-.4-.2-.5 0-.1-.2-.3-.3-.4-.1 0-.1-.1-.1-.2l1.3-2.3c.1-.1.2-.1.3-.1.3.2 1 .7 1.5 1.5s.6 1.6.6 2c0 0-.1.1-.2.1z"
-                style="fill:currentColor"
-              />
-            </svg>
+              data-mocked-icon="CodeSmellIcon"
+            />
             overview.metric.new_code_smells
           </div>
         </div>

server/sonar-web/src/main/js/apps/overview/main/__tests__/__snapshots__/Coverage-test.tsx.snap

@@ -34,7 +34,11 @@ exports[`should render correctly 1`] = `
         >
           <div
             class="display-inline-block text-middle big-spacer-right neg-offset-left"
-          />
+          >
+            <svg
+              data-mocked-element="CoverageRating"
+            />
+          </div>
           <div
             class="display-inline-block text-middle"
           >
@@ -58,19 +62,8 @@ exports[`should render correctly 1`] = `
               class="overview-domain-measure-history-link"
             >
               <svg
-                height="16"
-                space="preserve"
-                style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-                version="1.1"
-                viewBox="0 0 16 16"
-                width="16"
-                xlink="http://www.w3.org/1999/xlink"
-              >
-                <path
-                  d="M14.7 3.4v3.3c0 .1 0 .2-.1.2s-.2 0-.3-.1l-.9-.9-4.8 4.8c-.1.1-.1.1-.2.1s-.1 0-.2-.1L6.4 9l-3.2 3.2-1.5-1.5 4.5-4.5c.1-.1.1-.1.2-.1s.1 0 .2.1L8.4 8l3.5-3.5-.9-1c-.1-.1-.1-.2-.1-.3s.1-.1.2-.1h3.3c.1 0 .1 0 .2.1.1 0 .1.1.1.2z"
-                  style="fill:currentColor"
-                />
-              </svg>
+                data-mocked-icon="HistoryIcon"
+              />
               <span>
                 project_activity.page
               </span>
@@ -80,19 +73,8 @@ exports[`should render correctly 1`] = `
             class="overview-domain-measure-history-link"
           >
             <svg
-              height="16"
-              space="preserve"
-              style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16"
-              xlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                d="M14.7 3.4v3.3c0 .1 0 .2-.1.2s-.2 0-.3-.1l-.9-.9-4.8 4.8c-.1.1-.1.1-.2.1s-.1 0-.2-.1L6.4 9l-3.2 3.2-1.5-1.5 4.5-4.5c.1-.1.1-.1.2-.1s.1 0 .2.1L8.4 8l3.5-3.5-.9-1c-.1-.1-.1-.2-.1-.3s.1-.1.2-.1h3.3c.1 0 .1 0 .2.1.1 0 .1.1.1.2z"
-                style="fill:currentColor"
-              />
-            </svg>
+              data-mocked-icon="HistoryIcon"
+            />
             <span>
               project_activity.page
             </span>
@@ -120,19 +102,8 @@ exports[`should render correctly 1`] = `
               class="overview-domain-measure-history-link"
             >
               <svg
-                height="16"
-                space="preserve"
-                style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-                version="1.1"
-                viewBox="0 0 16 16"
-                width="16"
-                xlink="http://www.w3.org/1999/xlink"
-              >
-                <path
-                  d="M14.7 3.4v3.3c0 .1 0 .2-.1.2s-.2 0-.3-.1l-.9-.9-4.8 4.8c-.1.1-.1.1-.2.1s-.1 0-.2-.1L6.4 9l-3.2 3.2-1.5-1.5 4.5-4.5c.1-.1.1-.1.2-.1s.1 0 .2.1L8.4 8l3.5-3.5-.9-1c-.1-.1-.1-.2-.1-.3s.1-.1.2-.1h3.3c.1 0 .1 0 .2.1.1 0 .1.1.1.2z"
-                  style="fill:currentColor"
-                />
-              </svg>
+                data-mocked-icon="HistoryIcon"
+              />
               <span>
                 project_activity.page
               </span>

server/sonar-web/src/main/js/apps/overview/main/__tests__/__snapshots__/Duplications-test.tsx.snap

@@ -35,8 +35,8 @@ exports[`should render correctly 1`] = `
           <div
             class="display-inline-block text-middle big-spacer-right neg-offset-left"
           >
-            <div
-              class="duplications-rating duplications-rating-big duplications-rating-A"
+            <svg
+              data-mocked-element="DuplicationsRating"
             />
           </div>
           <div
@@ -58,19 +58,8 @@ exports[`should render correctly 1`] = `
               class="overview-domain-measure-history-link"
             >
               <svg
-                height="16"
-                space="preserve"
-                style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-                version="1.1"
-                viewBox="0 0 16 16"
-                width="16"
-                xlink="http://www.w3.org/1999/xlink"
-              >
-                <path
-                  d="M14.7 3.4v3.3c0 .1 0 .2-.1.2s-.2 0-.3-.1l-.9-.9-4.8 4.8c-.1.1-.1.1-.2.1s-.1 0-.2-.1L6.4 9l-3.2 3.2-1.5-1.5 4.5-4.5c.1-.1.1-.1.2-.1s.1 0 .2.1L8.4 8l3.5-3.5-.9-1c-.1-.1-.1-.2-.1-.3s.1-.1.2-.1h3.3c.1 0 .1 0 .2.1.1 0 .1.1.1.2z"
-                  style="fill:currentColor"
-                />
-              </svg>
+                data-mocked-icon="HistoryIcon"
+              />
               <span>
                 project_activity.page
               </span>
@@ -99,19 +88,8 @@ exports[`should render correctly 1`] = `
               class="overview-domain-measure-history-link"
             >
               <svg
-                height="16"
-                space="preserve"
-                style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-                version="1.1"
-                viewBox="0 0 16 16"
-                width="16"
-                xlink="http://www.w3.org/1999/xlink"
-              >
-                <path
-                  d="M14.7 3.4v3.3c0 .1 0 .2-.1.2s-.2 0-.3-.1l-.9-.9-4.8 4.8c-.1.1-.1.1-.2.1s-.1 0-.2-.1L6.4 9l-3.2 3.2-1.5-1.5 4.5-4.5c.1-.1.1-.1.2-.1s.1 0 .2.1L8.4 8l3.5-3.5-.9-1c-.1-.1-.1-.2-.1-.3s.1-.1.2-.1h3.3c.1 0 .1 0 .2.1.1 0 .1.1.1.2z"
-                  style="fill:currentColor"
-                />
-              </svg>
+                data-mocked-icon="HistoryIcon"
+              />
               <span>
                 project_activity.page
               </span>

server/sonar-web/src/main/js/apps/overview/main/__tests__/__snapshots__/VulnerabilitiesAndHotspots-test.tsx.snap

@@ -62,38 +62,16 @@ exports[`should render correctly 1`] = `
           >
             <svg
               class="little-spacer-right"
-              height="16"
-              space="preserve"
-              style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16"
-              xlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                d="M10.8 5H6V3.9a2.28 2.28 0 0 1 2-2.5 2.22 2.22 0 0 1 1.8 1.2.48.48 0 0 0 .7.2.48.48 0 0 0 .2-.7A3 3 0 0 0 8 .4a3.34 3.34 0 0 0-3 3.5v1.2a2.16 2.16 0 0 0-2 2.1v4.4a2.22 2.22 0 0 0 2.2 2.2h5.6a2.22 2.22 0 0 0 2.2-2.2V7.2A2.22 2.22 0 0 0 10.8 5zm-2.2 5.5v1.2H7.4v-1.2a1.66 1.66 0 0 1-1.1-1.6A1.75 1.75 0 0 1 8 7.2a1.71 1.71 0 0 1 .6 3.3z"
-                style="fill:currentColor"
-              />
-            </svg>
+              data-mocked-icon="VulnerabilityIcon"
+            />
             overview.metric.vulnerabilities
           </div>
           <a
             class="overview-domain-measure-history-link"
           >
             <svg
-              height="16"
-              space="preserve"
-              style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16"
-              xlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                d="M14.7 3.4v3.3c0 .1 0 .2-.1.2s-.2 0-.3-.1l-.9-.9-4.8 4.8c-.1.1-.1.1-.2.1s-.1 0-.2-.1L6.4 9l-3.2 3.2-1.5-1.5 4.5-4.5c.1-.1.1-.1.2-.1s.1 0 .2.1L8.4 8l3.5-3.5-.9-1c-.1-.1-.1-.2-.1-.3s.1-.1.2-.1h3.3c.1 0 .1 0 .2.1.1 0 .1.1.1.2z"
-                style="fill:currentColor"
-              />
-            </svg>
+              data-mocked-icon="HistoryIcon"
+            />
             <span>
               project_activity.page
             </span>
@@ -114,55 +92,16 @@ exports[`should render correctly 1`] = `
           >
             <svg
               class="little-spacer-right"
-              height="16"
-              space="preserve"
-              style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16"
-              xlink="http://www.w3.org/1999/xlink"
-            >
-              <g
-                style="fill:currentColor"
-              >
-                <path
-                  d="M10.238 2.416c-0.432-0.895-1.259-1.504-2.202-1.504-1.386 0-2.521 1.318-2.521 2.927v5.481"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-width="1.1429"
-                />
-                <path
-                  d="M8.537 10.372v1.199h-1.099v-1.199c-0.638-0.228-1.099-0.832-1.099-1.546 0-0.909 0.739-1.649 1.648-1.649s1.649 0.74 1.649 1.649c0 0.715-0.461 1.32-1.099 1.546zM10.734 4.979h-5.494c-1.21 0-2.199 0.989-2.199 2.197v4.395c0 1.21 0.989 2.199 2.199 2.199h5.494c1.209 0 2.197-0.989 2.197-2.199v-4.395c0-1.209-0.989-2.197-2.197-2.197z"
-                />
-                <path
-                  d="M4.030 6.352h6.923v6.923h-6.923z"
-                />
-                <path
-                  d="M7.504 10.283c0-0.423 0.048-0.757 0.144-1.002s0.251-0.457 0.465-0.637c0.215-0.18 0.377-0.344 0.489-0.493s0.167-0.313 0.167-0.493c0-0.438-0.189-0.656-0.565-0.656-0.174 0-0.314 0.064-0.421 0.191s-0.164 0.3-0.17 0.518h-1.469c0.006-0.58 0.189-1.031 0.548-1.354s0.864-0.485 1.513-0.485c0.646 0 1.147 0.149 1.501 0.447s0.532 0.723 0.532 1.274c0 0.241-0.048 0.459-0.144 0.656s-0.249 0.398-0.46 0.604l-0.5 0.465c-0.142 0.136-0.241 0.276-0.296 0.42s-0.086 0.325-0.091 0.545h-1.243zM7.326 11.604c0-0.215 0.078-0.39 0.233-0.528s0.349-0.207 0.58-0.207c0.232 0 0.425 0.068 0.58 0.207s0.233 0.313 0.233 0.528-0.078 0.39-0.233 0.528c-0.155 0.138-0.349 0.207-0.58 0.207s-0.425-0.068-0.58-0.207c-0.155-0.138-0.233-0.313-0.233-0.528z"
-                  fill="#fff"
-                />
-              </g>
-            </svg>
+              data-mocked-icon="SecurityHotspotIcon"
+            />
             overview.metric.security_hotspots
           </div>
           <a
             class="overview-domain-measure-history-link"
           >
             <svg
-              height="16"
-              space="preserve"
-              style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16"
-              xlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                d="M14.7 3.4v3.3c0 .1 0 .2-.1.2s-.2 0-.3-.1l-.9-.9-4.8 4.8c-.1.1-.1.1-.2.1s-.1 0-.2-.1L6.4 9l-3.2 3.2-1.5-1.5 4.5-4.5c.1-.1.1-.1.2-.1s.1 0 .2.1L8.4 8l3.5-3.5-.9-1c-.1-.1-.1-.2-.1-.3s.1-.1.2-.1h3.3c.1 0 .1 0 .2.1.1 0 .1.1.1.2z"
-                style="fill:currentColor"
-              />
-            </svg>
+              data-mocked-icon="HistoryIcon"
+            />
             <span>
               project_activity.page
             </span>
@@ -212,19 +151,8 @@ exports[`should render correctly 1`] = `
           >
             <svg
               class="little-spacer-right"
-              height="16"
-              space="preserve"
-              style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16"
-              xlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                d="M10.8 5H6V3.9a2.28 2.28 0 0 1 2-2.5 2.22 2.22 0 0 1 1.8 1.2.48.48 0 0 0 .7.2.48.48 0 0 0 .2-.7A3 3 0 0 0 8 .4a3.34 3.34 0 0 0-3 3.5v1.2a2.16 2.16 0 0 0-2 2.1v4.4a2.22 2.22 0 0 0 2.2 2.2h5.6a2.22 2.22 0 0 0 2.2-2.2V7.2A2.22 2.22 0 0 0 10.8 5zm-2.2 5.5v1.2H7.4v-1.2a1.66 1.66 0 0 1-1.1-1.6A1.75 1.75 0 0 1 8 7.2a1.71 1.71 0 0 1 .6 3.3z"
-                style="fill:currentColor"
-              />
-            </svg>
+              data-mocked-icon="VulnerabilityIcon"
+            />
             overview.metric.new_vulnerabilities
           </div>
         </div>
@@ -245,36 +173,8 @@ exports[`should render correctly 1`] = `
           >
             <svg
               class="little-spacer-right"
-              height="16"
-              space="preserve"
-              style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-              version="1.1"
-              viewBox="0 0 16 16"
-              width="16"
-              xlink="http://www.w3.org/1999/xlink"
-            >
-              <g
-                style="fill:currentColor"
-              >
-                <path
-                  d="M10.238 2.416c-0.432-0.895-1.259-1.504-2.202-1.504-1.386 0-2.521 1.318-2.521 2.927v5.481"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-width="1.1429"
-                />
-                <path
-                  d="M8.537 10.372v1.199h-1.099v-1.199c-0.638-0.228-1.099-0.832-1.099-1.546 0-0.909 0.739-1.649 1.648-1.649s1.649 0.74 1.649 1.649c0 0.715-0.461 1.32-1.099 1.546zM10.734 4.979h-5.494c-1.21 0-2.199 0.989-2.199 2.197v4.395c0 1.21 0.989 2.199 2.199 2.199h5.494c1.209 0 2.197-0.989 2.197-2.199v-4.395c0-1.209-0.989-2.197-2.197-2.197z"
-                />
-                <path
-                  d="M4.030 6.352h6.923v6.923h-6.923z"
-                />
-                <path
-                  d="M7.504 10.283c0-0.423 0.048-0.757 0.144-1.002s0.251-0.457 0.465-0.637c0.215-0.18 0.377-0.344 0.489-0.493s0.167-0.313 0.167-0.493c0-0.438-0.189-0.656-0.565-0.656-0.174 0-0.314 0.064-0.421 0.191s-0.164 0.3-0.17 0.518h-1.469c0.006-0.58 0.189-1.031 0.548-1.354s0.864-0.485 1.513-0.485c0.646 0 1.147 0.149 1.501 0.447s0.532 0.723 0.532 1.274c0 0.241-0.048 0.459-0.144 0.656s-0.249 0.398-0.46 0.604l-0.5 0.465c-0.142 0.136-0.241 0.276-0.296 0.42s-0.086 0.325-0.091 0.545h-1.243zM7.326 11.604c0-0.215 0.078-0.39 0.233-0.528s0.349-0.207 0.58-0.207c0.232 0 0.425 0.068 0.58 0.207s0.233 0.313 0.233 0.528-0.078 0.39-0.233 0.528c-0.155 0.138-0.349 0.207-0.58 0.207s-0.425-0.068-0.58-0.207c-0.155-0.138-0.233-0.313-0.233-0.528z"
-                  fill="#fff"
-                />
-              </g>
-            </svg>
+              data-mocked-icon="SecurityHotspotIcon"
+            />
             overview.metric.new_security_hotspots
           </div>
         </div>

server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/SysInfoItem-test.tsx

@@ -21,6 +21,8 @@ import * as React from 'react';
 import { shallow, mount } from 'enzyme';
 import SysInfoItem from '../SysInfoItem';
 
+jest.mock('../../../../../components/icons-components/AlertSuccessIcon');
+
 it('should render string', () => {
   const wrapper = shallow(<SysInfoItem name="foo" value="/some/path/as/an/example" />);
   expect(wrapper.find('code').text()).toBe('/some/path/as/an/example');

server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap

@@ -127,35 +127,7 @@ Array [
               <BooleanItem
                 value={true}
               >
-                <AlertSuccessIcon>
-                  <Icon>
-                    <svg
-                      height={16}
-                      style={
-                        Object {
-                          "clipRule": "evenodd",
-                          "fillRule": "evenodd",
-                          "strokeLinejoin": "round",
-                          "strokeMiterlimit": 1.41421,
-                        }
-                      }
-                      version="1.1"
-                      viewBox="0 0 16 16"
-                      width={16}
-                      xmlSpace="preserve"
-                      xmlnsXlink="http://www.w3.org/1999/xlink"
-                    >
-                      <path
-                        d="M12.607 6.554q0-0.25-0.161-0.411l-0.813-0.804q-0.17-0.17-0.402-0.17t-0.402 0.17l-3.643 3.634-2.018-2.018q-0.17-0.17-0.402-0.17t-0.402 0.17l-0.813 0.804q-0.161 0.161-0.161 0.411 0 0.241 0.161 0.402l3.232 3.232q0.17 0.17 0.402 0.17 0.241 0 0.411-0.17l4.848-4.848q0.161-0.161 0.161-0.402zM14.857 8q0 1.866-0.92 3.442t-2.496 2.496-3.442 0.92-3.442-0.92-2.496-2.496-0.92-3.442 0.92-3.442 2.496-2.496 3.442-0.92 3.442 0.92 2.496 2.496 0.92 3.442z"
-                        style={
-                          Object {
-                            "fill": "#00aa00",
-                          }
-                        }
-                      />
-                    </svg>
-                  </Icon>
-                </AlertSuccessIcon>
+                <AlertSuccessIcon />
               </BooleanItem>
             </SysInfoItem>
           </td>

server/sonar-web/src/main/js/components/icons-components/__mocks__/AlertSuccessIcon.tsx

@@ -0,0 +1,22 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+export default function AlertSuccessIcon() {
+  return null;
+}

server/sonar-web/src/main/js/components/icons-components/__mocks__/BugIcon.tsx

@@ -0,0 +1,22 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+export default function BugIcon() {
+  return null;
+}

server/sonar-web/src/main/js/components/icons-components/__mocks__/BulletListIcon.tsx

@@ -0,0 +1,22 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+export default function BulletListIcon() {
+  return null;
+}

server/sonar-web/src/main/js/components/icons-components/__mocks__/CodeSmellIcon.tsx

@@ -0,0 +1,22 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+export default function CodeSmellIcon() {
+  return null;
+}

server/sonar-web/src/main/js/components/icons-components/__mocks__/SearchIcon.tsx

@@ -0,0 +1,22 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+export default function SearchIcon() {
+  return null;
+}

server/sonar-web/src/main/js/components/icons-components/__mocks__/SecurityHotspotIcon.tsx

@@ -0,0 +1,22 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+export default function SecurityHotspotIcon() {
+  return null;
+}

server/sonar-web/src/main/js/components/icons-components/__mocks__/TagsIcon.tsx

@@ -0,0 +1,22 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+export default function TagsIcon() {
+  return null;
+}

server/sonar-web/src/main/js/components/icons-components/__mocks__/VulnerabilityIcon.tsx

@@ -0,0 +1,22 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+export default function VulnerabilityIcon() {
+  return null;
+}

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -2640,8 +2640,9 @@ about_page.languages.text=20+ programming languages are supported by SonarQube t
 
 about_page.quality_model=Quality Model
 about_page.quality_model.bugs=track code that is demonstrably wrong or highly likely to yield unexpected behavior.
-about_page.quality_model.vulnerabilities=are raised on code that is potentially vulnerable to exploitation by hackers.
+about_page.quality_model.vulnerabilities=are raised on code that can be exploited by hackers.
 about_page.quality_model.code_smells=will confuse maintainers or give them pause. They are measured primarily in terms of the time they will take to fix.
+about_page.quality_model.security_hotspots=are raised on security-sensitive code that requires manual review to assess whether or not a vulnerability exists.
 
 about_page.clean_code=Write Clean Code
 about_page.clean_code.text=By fixing new issues as they appear in code, you create and maintain a clean code base. Even on legacy projects, focusing on keeping new code clean will eventually yield a code base you can be proud of.