SONAR-8713 Add issue type icons to SQ interface

2 files changed, 30 insertions, 7 deletions

diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutIssues.js b/server/sonar-web/src/main/js/apps/about/components/AboutIssues.js
index dd2f0b3584e..8213bf6316c 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutIssues.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutIssues.js
@@ -19,23 +19,40 @@
  */
 import React from 'react';
 import { translate } from '../../../helpers/l10n';
+import BugIcon from '../../../components/ui/BugIcon';
+import VulnerabilityIcon from '../../../components/ui/VulnerabilityIcon';
+import CodeSmellIcon from '../../../components/ui/CodeSmellIcon';
 
 export default class AboutIssues extends React.Component {
-
   render () {
     return (
         <div className="boxed-group">
           <h2>{translate('about_page.quality_model')}</h2>
 
           <div className="boxed-group-inner clearfix">
-            <h3 className="spacer-bottom">{translate('issue.type.BUG.plural')}</h3>
-            <p className="about-page-text">{translate('about_page.quality_model.bugs')}</p>
+            <h3 className="spacer-bottom">
+              <span className="little-spacer-right"><BugIcon/></span>
+              {translate('issue.type.BUG.plural')}
+            </h3>
+            <p className="about-page-text">
+              {translate('about_page.quality_model.bugs')}
+            </p>
 
-            <h3 className="big-spacer-top spacer-bottom">{translate('issue.type.VULNERABILITY.plural')}</h3>
-            <p className="about-page-text">{translate('about_page.quality_model.vulnerabilities')}</p>
+            <h3 className="big-spacer-top spacer-bottom">
+              <span className="little-spacer-right"><VulnerabilityIcon/></span>
+              {translate('issue.type.VULNERABILITY.plural')}
+            </h3>
+            <p className="about-page-text">
+              {translate('about_page.quality_model.vulnerabilities')}
+            </p>
 
-            <h3 className="big-spacer-top spacer-bottom">{translate('issue.type.CODE_SMELL.plural')}</h3>
-            <p className="about-page-text">{translate('about_page.quality_model.code_smells')}</p>
+            <h3 className="big-spacer-top spacer-bottom">
+              <span className="little-spacer-right"><CodeSmellIcon/></span>
+              {translate('issue.type.CODE_SMELL.plural')}
+            </h3>
+            <p className="about-page-text">
+              {translate('about_page.quality_model.code_smells')}
+            </p>
           </div>
         </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js b/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js
index 28b3d1ae8bb..d55a975fd69 100644
--- a/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js
+++ b/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js
@@ -22,6 +22,9 @@ import { Link } from 'react-router';
 import { formatMeasure } from '../../../helpers/measures';
 import { translate } from '../../../helpers/l10n';
 import { getIssuesUrl } from '../../../helpers/urls';
+import BugIcon from '../../../components/ui/BugIcon';
+import VulnerabilityIcon from '../../../components/ui/VulnerabilityIcon';
+import CodeSmellIcon from '../../../components/ui/CodeSmellIcon';
 
 export default class EntryIssueTypes extends React.Component {
   static propTypes = {
@@ -43,6 +46,7 @@ export default class EntryIssueTypes extends React.Component {
                   {formatMeasure(bugs, 'SHORT_INT')}
                 </Link>
               </div>
+              <span className="little-spacer-right"><BugIcon/></span>
               {translate('issue.type.BUG.plural')}
             </li>
             <li>
@@ -52,6 +56,7 @@ export default class EntryIssueTypes extends React.Component {
                   {formatMeasure(vulnerabilities, 'SHORT_INT')}
                 </Link>
               </div>
+              <span className="little-spacer-right"><VulnerabilityIcon/></span>
               {translate('issue.type.VULNERABILITY.plural')}
             </li>
             <li>
@@ -61,6 +66,7 @@ export default class EntryIssueTypes extends React.Component {
                   {formatMeasure(codeSmells, 'SHORT_INT')}
                 </Link>
               </div>
+              <span className="little-spacer-right"><CodeSmellIcon/></span>
               {translate('issue.type.CODE_SMELL.plural')}
             </li>
           </ul>