apply feedback on profiles page

6 files changed, 71 insertions, 31 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/meta/MetaQualityProfiles.js b/server/sonar-web/src/main/js/apps/overview/meta/MetaQualityProfiles.js
index b72a1d96078..1fc958a58b8 100644
--- a/server/sonar-web/src/main/js/apps/overview/meta/MetaQualityProfiles.js
+++ b/server/sonar-web/src/main/js/apps/overview/meta/MetaQualityProfiles.js
@@ -20,9 +20,8 @@
 import React from 'react';
 import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
-import { getQualityProfileUrl } from '../../../helpers/urls';
+import { getQualityProfileUrl, getRulesUrl } from '../../../helpers/urls';
 import { searchRules } from '../../../api/rules';
-import { getRulesUrl } from '../../../helpers/urls';
 
 export default class MetaQualityProfiles extends React.Component {
   state = {
@@ -64,6 +63,11 @@ export default class MetaQualityProfiles extends React.Component {
     return searchRules(data).then(r => r.total);
   }
 
+  getDeprecatedRulesCount (profile) {
+    const count = this.state.deprecatedByKey[profile.key];
+    return count || 0;
+  }
+
   renderDeprecated (profile) {
     const count = this.state.deprecatedByKey[profile.key];
     if (!count) {
@@ -84,9 +88,50 @@ export default class MetaQualityProfiles extends React.Component {
     );
   }
 
+  renderProfile (profile) {
+    const inner = (
+        <div>
+          <span className="note spacer-right">
+            {'(' + profile.language + ')'}
+          </span>
+          <a href={getQualityProfileUrl(profile.key)}>
+            {profile.name}
+          </a>
+        </div>
+    );
+
+    const count = this.getDeprecatedRulesCount(profile);
+
+    if (count > 0) {
+      const tooltip =
+          translateWithParameters('overview.deprecated_profile', count);
+      return (
+          <li key={profile.key}
+              className="overview-deprecated-rules"
+              title={tooltip}
+              data-toggle="tooltip">
+            {inner}
+          </li>
+      );
+    }
+
+    return (
+        <li key={profile.key}>
+          {inner}
+        </li>
+    );
+  }
+
   render () {
     const { profiles } = this.props;
 
+    const deprecatedStyles = {
+      padding: '3px 6px',
+      border: '1px solid #ebccd1',
+      borderRadius: '3px',
+      backgroundColor: '#f2dede'
+    };
+
     return (
         <TooltipsContainer>
           <div>
@@ -95,17 +140,7 @@ export default class MetaQualityProfiles extends React.Component {
             </h4>
 
             <ul className="overview-meta-list">
-              {profiles.map(profile => (
-                  <li key={profile.key}>
-                    {this.renderDeprecated(profile)}
-                    <span className="note spacer-right">
-                      {'(' + profile.language + ')'}
-                    </span>
-                    <a href={getQualityProfileUrl(profile.key)}>
-                      {profile.name}
-                    </a>
-                  </li>
-              ))}
+              {profiles.map(profile => this.renderProfile(profile))}
             </ul>
           </div>
         </TooltipsContainer>
diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index eaeed145c22..2c920297fb1 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -283,6 +283,14 @@
   background-color: transparent !important;
 }
 
+.overview-deprecated-rules {
+  margin: 4px -6px 4px;
+  padding: 3px 6px;
+  border: 1px solid #ebccd1;
+  border-radius: 3px;
+  background-color: #f2dede;
+}
+
 /*
  * Animations
  */
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.js b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.js
index 02279d92572..fd6e98d6f72 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.js
@@ -21,7 +21,6 @@ import React from 'react';
 import keyBy from 'lodash/keyBy';
 import ProfileRulesRow from './ProfileRulesRow';
 import { ProfileType } from '../propTypes';
-import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
 import { searchRules, takeFacet } from '../../../api/rules';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { formatMeasure } from '../../../helpers/measures';
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.js b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.js
index 6d26699393a..8239e571ca6 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.js
@@ -37,10 +37,6 @@ export default class EvolutionDeprecated extends React.Component {
       return null;
     }
 
-    const totalRules = profilesWithDeprecations
-        .map(p => p.activeDeprecatedRuleCount)
-        .reduce((p, c) => p + c, 0);
-
     const sortedProfiles =
         sortBy(profilesWithDeprecations, p => -p.activeDeprecatedRuleCount);
 
@@ -52,8 +48,7 @@ export default class EvolutionDeprecated extends React.Component {
           </div>
           <div className="spacer-bottom">
             {translateWithParameters(
-                'quality_profiles.x_deprecated_rules_are_still_activated',
-                totalRules,
+                'quality_profiles.deprecated_rules_are_still_activated',
                 profilesWithDeprecations.length
             )}
           </div>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.js b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.js
index 213f8877c51..8d31c3e16c9 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.js
@@ -23,10 +23,11 @@ import sortBy from 'lodash/sortBy';
 import { searchRules } from '../../../api/rules';
 import { translateWithParameters, translate } from '../../../helpers/l10n';
 import { getRulesUrl } from '../../../helpers/urls';
+import { formatMeasure } from '../../../helpers/measures';
 
-const RULES_LIMIT = 3;
+const RULES_LIMIT = 10;
 
-const PERIOD_START_MOMENT = moment().subtract(1, 'month');
+const PERIOD_START_MOMENT = moment().subtract(1, 'year');
 
 function parseRules (r) {
   const { rules, actives } = r;
@@ -82,13 +83,6 @@ export default class EvolutionRules extends React.Component {
             <strong className="pull-left">
               {translate('quality_profiles.latest_new_rules')}
             </strong>
-
-            {this.state.latestRulesTotal > RULES_LIMIT && (
-                <a className="pull-right small text-muted"
-                   href={newRulesUrl}>
-                  {translate('see_all')}
-                </a>
-            )}
           </div>
           <ul>
             {this.state.latestRules.map(rule => (
@@ -117,6 +111,16 @@ export default class EvolutionRules extends React.Component {
                 </li>
             ))}
           </ul>
+          {this.state.latestRulesTotal > RULES_LIMIT && (
+              <div className="spacer-top">
+                <a className="small"
+                   href={newRulesUrl}>
+                  {translate('see_all')}
+                  {' '}
+                  {formatMeasure(this.state.latestRulesTotal, 'SHORT_INT')}
+                </a>
+              </div>
+          )}
         </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/styles.css b/server/sonar-web/src/main/js/apps/quality-profiles/styles.css
index 5d97a57c524..42c96abf9a8 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/styles.css
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/styles.css
@@ -77,8 +77,7 @@
 
 .quality-profile-rules-deprecated {
   padding: 15px 20px;
-  border-top: 1px solid #e6e6e6;
-  background-color: #fcf8e3;
+  background-color: #f2dede;
 }
 
 .quality-profile-exporters {