apply feedback for the quality profiles page

14 files changed, 114 insertions, 86 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/App.js b/server/sonar-web/src/main/js/apps/quality-profiles/components/App.js
index 30d59329a05..480a61ce779 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/App.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/App.js
@@ -31,6 +31,7 @@ export default class App extends React.Component {
   state = { loading: true };
 
   componentWillMount () {
+    document.querySelector('html').classList.add('dashboard-page');
     this.updateProfiles = this.updateProfiles.bind(this);
   }
 
@@ -41,6 +42,7 @@ export default class App extends React.Component {
 
   componentWillUnmount () {
     this.mounted = false;
+    document.querySelector('html').classList.remove('dashboard-page');
   }
 
   loadData () {
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileContainer.js b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileContainer.js
index d1fe79cfcbe..63cccd4972d 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileContainer.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileContainer.js
@@ -32,14 +32,6 @@ export default class ProfileContainer extends React.Component {
     updateProfiles: React.PropTypes.func
   };
 
-  componentWillMount () {
-    document.querySelector('html').classList.add('dashboard-page');
-  }
-
-  componentWillUnmount () {
-    document.querySelector('html').classList.remove('dashboard-page');
-  }
-
   render () {
     const { profiles, location, ...other } = this.props;
     const { key } = location.query;
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.js b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.js
index 3023d9d3d21..1374002d6ed 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.js
@@ -130,11 +130,13 @@ export default class ProfileHeader extends React.Component {
                     <i className="icon-dropdown"/>
                   </button>
                   <ul className="dropdown-menu dropdown-menu-right">
-                    <li>
-                      <a href={activateMoreUrl}>
-                        {translate('quality_profiles.activate_more_rules')}
-                      </a>
-                    </li>
+                    {canAdmin && (
+                        <li>
+                          <a href={activateMoreUrl}>
+                            {translate('quality_profiles.activate_more_rules')}
+                          </a>
+                        </li>
+                    )}
                     <li>
                       <a id="quality-profile-backup" href={backupUrl}>
                         {translate('backup_verb')}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.js b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.js
index b83eaf2e090..5751a3d3239 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.js
@@ -94,7 +94,7 @@ export default class ProfileInheritance extends React.Component {
           </header>
 
           {!this.state.loading && (
-              <table className="data condensed zebra">
+              <table className="data zebra">
                 <tbody>
                   {this.state.ancestors.map((ancestor, index) => (
                       <ProfileInheritanceBox
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritanceBox.js b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritanceBox.js
index 5cf7ee908f7..b4580b5e527 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritanceBox.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritanceBox.js
@@ -30,7 +30,7 @@ export default class ProfileInheritanceBox extends React.Component {
       overridingRuleCount: React.PropTypes.number
     }).isRequired,
     depth: React.PropTypes.number.isRequired,
-    displayLink: React.PropTypes.bool.isRequired,
+    displayLink: React.PropTypes.bool,
     className: React.PropTypes.string
   };
 
@@ -45,13 +45,13 @@ export default class ProfileInheritanceBox extends React.Component {
     return (
         <tr className={className}>
           <td>
-            <h6 style={{ paddingLeft: offset }}>
+            <div style={{ paddingLeft: offset }}>
               {this.props.displayLink ? (
                   <ProfileLink profileKey={profile.key}>
                     {profile.name}
                   </ProfileLink>
               ) : profile.name}
-            </h6>
+            </div>
           </td>
 
           <td>
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 dd04d7cffde..02279d92572 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
@@ -108,7 +108,7 @@ export default class ProfileRules extends React.Component {
   renderActiveTitle () {
     return (
         <strong>
-          {translate('quality_profile.total_active_rules')}
+          {translate('total')}
         </strong>
     );
   }
@@ -142,10 +142,17 @@ export default class ProfileRules extends React.Component {
       return null;
     }
 
+    if (this.state.total === this.state.activatedTotal) {
+      return <span className="note text-muted">0</span>;
+    }
+
     return (
-        <a href={rulesUrl}>
+        <a href={rulesUrl} className="small text-muted">
           <strong>
-            {formatMeasure(this.state.total, 'SHORT_INT')}
+            {formatMeasure(
+                this.state.total - this.state.activatedTotal,
+                'SHORT_INT'
+            )}
           </strong>
         </a>
     );
@@ -188,15 +195,20 @@ export default class ProfileRules extends React.Component {
       types: type
     });
 
-    const { count } = this.state.allByType[type];
+    const { count } = this.state.activatedByType[type];
+    const { count: total } = this.state.allByType[type];
 
     if (count == null) {
       return null;
     }
 
+    if (total === count) {
+      return <span className="note text-muted">0</span>;
+    }
+
     return (
-        <a href={rulesUrl}>
-          {formatMeasure(count, 'SHORT_INT')}
+        <a href={rulesUrl} className="small text-muted">
+          {formatMeasure(total - count, 'SHORT_INT')}
         </a>
     );
   }
@@ -232,38 +244,44 @@ export default class ProfileRules extends React.Component {
 
     return (
         <div className="quality-profile-rules">
-          <header className="clearfix">
-            <h2 className="pull-left">{translate('rules')}</h2>
-
-            {this.props.canAdmin && (
-                <a href={activateMoreUrl}
-                   className="button pull-right js-activate-rules">
-                  {translate('quality_profiles.activate_more')}
-                </a>
-            )}
-          </header>
-
-          {this.renderDeprecated()}
-
-          <TooltipsContainer options={{ delay: { show: 250, hide: 0 } }}>
-            <ul className="quality-profile-rules-distribution">
-              <li key="all" className="big-spacer-bottom">
+          <div className="quality-profile-rules-distribution">
+            <table className="data condensed">
+              <thead>
+                <tr>
+                  <th>
+                    <h2>{translate('rules')}</h2>
+                  </th>
+                  <th>Active</th>
+                  <th>Inactive</th>
+                </tr>
+              </thead>
+              <tbody>
                 <ProfileRulesRow
+                    key="all"
                     renderTitle={this.renderActiveTitle.bind(this)}
                     renderCount={this.renderActiveCount.bind(this)}
                     renderTotal={this.renderActiveTotal.bind(this)}/>
-              </li>
-
-              {TYPES.map(type => (
-                  <li key={type} className="spacer-top">
+                {TYPES.map(type => (
                     <ProfileRulesRow
+                        key={type}
                         renderTitle={this.renderTitleForType.bind(this, type)}
                         renderCount={this.renderCountForType.bind(this, type)}
                         renderTotal={this.renderTotalForType.bind(this, type)}/>
-                  </li>
-              ))}
-            </ul>
-          </TooltipsContainer>
+                ))}
+              </tbody>
+            </table>
+
+            {this.props.canAdmin && (
+                <div className="text-right big-spacer-top">
+                  <a href={activateMoreUrl}
+                     className="button js-activate-rules">
+                    {translate('quality_profiles.activate_more')}
+                  </a>
+                </div>
+            )}
+          </div>
+
+          {this.renderDeprecated()}
         </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRow.js b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRow.js
index e945ed924ad..930e2d7a9b6 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRow.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRow.js
@@ -30,16 +30,17 @@ export default class ProfileRulesRow extends React.Component {
     const { renderTitle, renderCount, renderTotal } = this.props;
 
     return (
-        <div className="clearfix">
-          <div className="pull-left">
+        <tr>
+          <td>
             {renderTitle()}
-          </div>
-          <div className="pull-right">
+          </td>
+          <td className="thin nowrap text-right">
             {renderCount()}
-            {' / '}
+          </td>
+          <td className="thin nowrap text-right">
             {renderTotal()}
-          </div>
-        </div>
+          </td>
+        </tr>
     );
   }
 }
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 fb0fd938783..132aa9eef92 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
@@ -41,7 +41,8 @@ export default class EvolutionDeprecated extends React.Component {
         .reduce((p, c) => p + c, 0);
 
     return (
-        <div className="quality-profiles-evolution-deprecated">
+        <div
+            className="quality-profile-box quality-profiles-evolution-deprecated">
           <div className="spacer-bottom">
             <strong>{translate('quality_profiles.deprecated_rules')}</strong>
           </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 e2956f2c329..213f8877c51 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
@@ -77,7 +77,7 @@ export default class EvolutionRules extends React.Component {
     });
 
     return (
-        <div className="quality-profiles-evolution-rules">
+        <div className="quality-profile-box quality-profiles-evolution-rules">
           <div className="clearfix">
             <strong className="pull-left">
               {translate('quality_profiles.latest_new_rules')}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.js b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.js
index 8b5b1e33f38..cdef6e1e9d0 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.js
@@ -40,7 +40,7 @@ export default class EvolutionStagnant extends React.Component {
     }
 
     return (
-        <div className="quality-profiles-evolution-stagnant">
+        <div className="quality-profile-box quality-profiles-evolution-stagnant">
           <div className="spacer-bottom">
             <strong>{translate('quality_profiles.stagnant_profiles')}</strong>
           </div>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.js b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.js
index cbb8e9de974..acc5eb4ba6b 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.js
@@ -56,11 +56,7 @@ export default class ProfilesList extends React.Component {
         <thead>
           <tr>
             <th>
-              <Link
-                  to={{ pathname: '/', query: { language: language.key } }}
-                  className="link-base-color">
-                {language.name}
-              </Link>
+              {language.name}
               {', '}
               {translateWithParameters(
                   'quality_profiles.x_profiles',
@@ -116,22 +112,23 @@ export default class ProfilesList extends React.Component {
           )}
 
           {languagesToShow.map(languageKey => (
-              <table
-                  key={languageKey}
-                  data-language={languageKey}
-                  className="data zebra zebra-hover quality-profiles-table">
+              <div key={languageKey}
+                   className="quality-profile-box quality-profiles-table">
+                <table data-language={languageKey}
+                       className="data zebra zebra-hover">
 
-                {this.renderHeader(
-                    languageKey,
-                    profilesToShow[languageKey].length)}
+                  {this.renderHeader(
+                      languageKey,
+                      profilesToShow[languageKey].length)}
 
-                <TooltipsContainer>
-                  <tbody>
-                    {this.renderProfiles(profilesToShow[languageKey])}
-                  </tbody>
-                </TooltipsContainer>
+                  <TooltipsContainer>
+                    <tbody>
+                      {this.renderProfiles(profilesToShow[languageKey])}
+                    </tbody>
+                  </TooltipsContainer>
 
-              </table>
+                </table>
+              </div>
           ))}
 
         </div>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.js b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.js
index 8a326ade01d..70276055fe5 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.js
@@ -38,11 +38,11 @@ export default class ProfilesListRow extends React.Component {
     const { profile } = this.props;
     const offset = 25 * (profile.depth - 1);
     return (
-        <h4 style={{ paddingLeft: offset }}>
+        <div style={{ paddingLeft: offset }}>
           <ProfileLink profileKey={profile.key}>
             {profile.name}
           </ProfileLink>
-        </h4>
+        </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 9cd46314b19..bfbf0a57db4 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
@@ -6,7 +6,9 @@
 }
 
 .quality-profiles-table {
-  margin-top: 30px;
+  margin-top: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 .quality-profiles-table-name { }
@@ -23,10 +25,8 @@
 
 .quality-profiles-list-header {
   line-height: 24px;
-  margin-bottom: 15px;
   padding: 5px 10px;
-  border-radius: 3px;
-  background-color: #f3f3f3;
+  border-bottom: 1px solid #e6e6e6;
 }
 
 .quality-profile-grid {
@@ -71,14 +71,13 @@
 }
 
 .quality-profile-rules-distribution {
-  padding: 0 20px 20px;
+  margin-bottom: 20px;
+  padding: 5px 20px 0;
 }
 
 .quality-profile-rules-deprecated {
-  margin-bottom: 20px;
   padding: 15px 20px;
   border-top: 1px solid #e6e6e6;
-  border-bottom: 1px solid #e6e6e6;
   background-color: #fcf8e3;
 }
 
@@ -119,19 +118,19 @@
 .quality-profiles-evolution-stagnant,
 .quality-profiles-evolution-rules {
   width: 325px;
-  padding: 15px 20px;
   box-sizing: border-box;
 }
 
 .quality-profiles-evolution-deprecated,
 .quality-profiles-evolution-stagnant {
   margin-right: 30px;
-  border: 1px solid #faebcc;
+  border-color: #faebcc;
   background-color: #fcf8e3;
 }
 
 .quality-profiles-evolution-rules {
   border: 1px solid #e6e6e6;
+  background-color: #fff;
 }
 
 .quality-profile-comparison-table {
diff --git a/server/sonar-web/src/main/less/init/tables.less b/server/sonar-web/src/main/less/init/tables.less
index d5802264ca9..c5ec9d3ed9d 100644
--- a/server/sonar-web/src/main/less/init/tables.less
+++ b/server/sonar-web/src/main/less/init/tables.less
@@ -52,6 +52,14 @@ table.data > thead > tr > th {
   border-bottom: 1px solid @barBorderColor;
   font-weight: 500;
 
+  &:first-child {
+    padding-left: 0
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+
   & > .small {
     display: block;
     line-height: 1.4;
@@ -70,6 +78,14 @@ table.data > tbody > tr > td {
   vertical-align: text-top;
   line-height: 16px;
 
+  &:first-child {
+    padding-left: 0
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+
   &.text-middle {
     vertical-align: middle;
   }