apply feedback for the quality profiles page

7 files changed, 68 insertions, 45 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/HomeContainer.js b/server/sonar-web/src/main/js/apps/quality-profiles/home/HomeContainer.js
index 94db2d7dc71..8001085e09d 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/HomeContainer.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/HomeContainer.js
@@ -33,8 +33,14 @@ export default class HomeContainer extends React.Component {
               titleTemplate="SonarQube - %s"/>
 
           <PageHeader {...this.props}/>
-          <Evolution {...this.props}/>
-          <ProfilesList {...this.props}/>
+          <div className="clearfix">
+            <div style={{ float: 'left', width: 750 }}>
+              <ProfilesList {...this.props}/>
+            </div>
+            <div style={{ float: 'right', width: 260, paddingLeft: 30 }}>
+              <Evolution {...this.props}/>
+            </div>
+          </div>
         </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.js b/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.js
index 1fcd7aa646e..9d9ed85759f 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.js
@@ -20,6 +20,7 @@
 import React from 'react';
 import CreateProfileView from '../views/CreateProfileView';
 import RestoreProfileView from '../views/RestoreProfileView';
+import RestoreBuiltInProfilesView from '../views/RestoreBuiltInProfilesView';
 import { translate } from '../../../helpers/l10n';
 import { getImporters } from '../../../api/quality-profiles';
 
@@ -73,12 +74,18 @@ export default class PageHeader extends React.Component {
 
   handleRestoreClick (e) {
     e.preventDefault();
-    e.target.blur();
     new RestoreProfileView()
         .on('done', this.props.updateProfiles)
         .render();
   }
 
+  handleRestoreBuiltIn (e) {
+    e.preventDefault();
+    new RestoreBuiltInProfilesView({ languages: this.props.languages })
+        .on('done', this.props.updateProfiles)
+        .render();
+  }
+
   render () {
     return (
         <header className="page-header">
@@ -87,19 +94,34 @@ export default class PageHeader extends React.Component {
           </h1>
 
           {this.props.canAdmin && (
-              <div className="page-actions button-group">
+              <div className="page-actions button-group dropdown">
                 <button
                     id="quality-profiles-create"
                     onClick={this.handleCreateClick.bind(this)}>
                   {translate('create')}
                 </button>
-
                 <button
-                    id="quality-profiles-restore"
-                    className="spacer-left"
-                    onClick={this.handleRestoreClick.bind(this)}>
-                  {translate('quality_profiles.restore_profile')}
+                    className="dropdown-toggle js-more-admin-actions"
+                    data-toggle="dropdown">
+                  <i className="icon-dropdown"/>
                 </button>
+                <ul className="dropdown-menu dropdown-menu-right">
+                  <li>
+                    <a href="#"
+                       id="quality-profiles-restore"
+                       onClick={this.handleRestoreClick.bind(this)}>
+                      {translate('quality_profiles.restore_profile')}
+                    </a>
+                  </li>
+
+                  <li>
+                    <a href="#"
+                       id="quality-profiles-restore-built-in"
+                       onClick={this.handleRestoreBuiltIn.bind(this)}>
+                      {translate('quality_profiles.restore_built_in_profiles')}
+                    </a>
+                  </li>
+                </ul>
               </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 acc5eb4ba6b..51f533c1861 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
@@ -18,13 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import { Link, PropTypes as RouterPropTypes } from 'react-router';
+import { PropTypes as RouterPropTypes } from 'react-router';
 import groupBy from 'lodash/groupBy';
 import pick from 'lodash/pick';
 import sortBy from 'lodash/sortBy';
 import ProfilesListRow from './ProfilesListRow';
 import ProfilesListHeader from './ProfilesListHeader';
-import RestoreBuiltInProfilesView from '../views/RestoreBuiltInProfilesView';
 import { ProfilesListType, LanguagesListType } from '../propTypes';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
@@ -36,14 +35,6 @@ export default class ProfilesList extends React.Component {
     location: RouterPropTypes.location
   };
 
-  handleRestoreBuiltIn (languageKey, e) {
-    e.preventDefault();
-    const language = this.props.languages.find(l => l.key === languageKey);
-    new RestoreBuiltInProfilesView({ language })
-        .on('done', this.props.updateProfiles)
-        .render();
-  }
-
   renderProfiles (profiles) {
     return profiles.map(profile => (
         <ProfilesListRow key={profile.key} profile={profile}/>
@@ -62,14 +53,6 @@ export default class ProfilesList extends React.Component {
                   'quality_profiles.x_profiles',
                   profilesCount
               )}
-              {this.props.canAdmin && (
-                  <button
-                      className="huge-spacer-left js-restore-built-in"
-                      data-language={languageKey}
-                      onClick={this.handleRestoreBuiltIn.bind(this, languageKey)}>
-                    {translate('quality_profiles.restore_built_in_profiles')}
-                  </button>
-              )}
             </th>
             <th className="text-right nowrap">
               {translate('quality_profiles.list.projects')}
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 bfbf0a57db4..0c1a947cfac 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
@@ -20,7 +20,7 @@
 .quality-profiles-table-projects,
 .quality-profiles-table-rules,
 .quality-profiles-table-date {
-  min-width: 120px;
+  min-width: 90px;
 }
 
 .quality-profiles-list-header {
@@ -108,22 +108,12 @@
 }
 
 .quality-profiles-evolution {
-  display: flex;
-  justify-content: flex-start;
-  align-items: stretch;
-  margin-bottom: 30px;
-}
-
-.quality-profiles-evolution-deprecated,
-.quality-profiles-evolution-stagnant,
-.quality-profiles-evolution-rules {
-  width: 325px;
-  box-sizing: border-box;
+  padding-top: 55px;
 }
 
 .quality-profiles-evolution-deprecated,
 .quality-profiles-evolution-stagnant {
-  margin-right: 30px;
+  margin-bottom: 20px;
   border-color: #faebcc;
   background-color: #fcf8e3;
 }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-restore-built-in-profiles-success.hbs b/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-restore-built-in-profiles-success.hbs
index 01ccc528718..41c449e88d4 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-restore-built-in-profiles-success.hbs
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-restore-built-in-profiles-success.hbs
@@ -4,7 +4,7 @@
   </div>
   <div class="modal-body">
     <div class="alert alert-success">
-      {{tp 'quality_profiles.restore_built_in_profiles_success_message' language.name}}
+      {{tp 'quality_profiles.restore_built_in_profiles_success_message' selectedLanguage}}
     </div>
   </div>
   <div class="modal-foot">
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-restore-built-in-profiles.hbs b/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-restore-built-in-profiles.hbs
index f7473ea8e26..a2cad2141df 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-restore-built-in-profiles.hbs
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-restore-built-in-profiles.hbs
@@ -4,7 +4,15 @@
   </div>
   <div class="modal-body">
     <div class="js-modal-messages"></div>
-    {{tp 'quality_profiles.restore_built_in_profiles_confirmation' language.name}}
+    <div id="restore-built-in-profiles-form-success" class="alert alert-success hidden"></div>
+    <div class="modal-field">
+      <label for="restore-built-in-profiles-language">{{t 'language'}}<em class="mandatory">*</em></label>
+      <select id="restore-built-in-profiles-language" name="language">
+        {{#each languages}}
+          <option value="{{key}}">{{name}}</option>
+        {{/each}}
+      </select>
+    </div>
   </div>
   <div class="modal-foot">
     <button id="restore-built-in-profiles-submit">{{t 'restore'}}</button>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/views/RestoreBuiltInProfilesView.js b/server/sonar-web/src/main/js/apps/quality-profiles/views/RestoreBuiltInProfilesView.js
index f71f85c06af..f76a9c2c913 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/views/RestoreBuiltInProfilesView.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/views/RestoreBuiltInProfilesView.js
@@ -27,7 +27,15 @@ export default ModalFormView.extend({
   successTemplate: TemplateSuccess,
 
   getTemplate () {
-    return this.done ? this.successTemplate : this.template;
+    return this.selectedLanguage ? this.successTemplate : this.template;
+  },
+
+  onRender () {
+    ModalFormView.prototype.onRender.apply(this, arguments);
+    this.$('select').select2({
+      width: '250px',
+      minimumResultsForSearch: 50
+    });
   },
 
   onFormSubmit () {
@@ -37,7 +45,10 @@ export default ModalFormView.extend({
   },
 
   sendRequest () {
-    restoreBuiltInProfiles(this.options.language.key)
+    const language = this.$('#restore-built-in-profiles-language').val();
+    this.selectedLanguage = this.options.languages
+        .find(l => l.key === language).name;
+    restoreBuiltInProfiles(language)
         .then(() => {
           this.done = true;
           this.render();
@@ -50,7 +61,10 @@ export default ModalFormView.extend({
   },
 
   serializeData () {
-    return { language: this.options.language };
+    return {
+      languages: this.options.languages,
+      selectedLanguage: this.selectedLanguage
+    };
   }
 });