extract SelectList component

13 files changed, 46 insertions, 50 deletions

diff --git a/server/sonar-web/src/main/js/apps/global-permissions/groups-view.js b/server/sonar-web/src/main/js/apps/global-permissions/groups-view.js
index c70a6a78005..45a774c3a9d 100644
--- a/server/sonar-web/src/main/js/apps/global-permissions/groups-view.js
+++ b/server/sonar-web/src/main/js/apps/global-permissions/groups-view.js
@@ -19,7 +19,7 @@
  */
 import Modal from '../../components/common/modals';
 import Template from './templates/global-permissions-groups.hbs';
-import '../../components/common/select-list';
+import '../../components/SelectList';
 
 function getSearchUrl (permission, project) {
   var url = baseUrl + '/api/permissions/groups?ps=100&permission=' + permission;
diff --git a/server/sonar-web/src/main/js/apps/global-permissions/users-view.js b/server/sonar-web/src/main/js/apps/global-permissions/users-view.js
index 7130c357255..61c454f3964 100644
--- a/server/sonar-web/src/main/js/apps/global-permissions/users-view.js
+++ b/server/sonar-web/src/main/js/apps/global-permissions/users-view.js
@@ -19,7 +19,7 @@
  */
 import Modal from '../../components/common/modals';
 import Template from './templates/global-permissions-users.hbs';
-import '../../components/common/select-list';
+import '../../components/SelectList';
 
 function getSearchUrl (permission, project) {
   var url = baseUrl + '/api/permissions/users?ps=100&permission=' + permission;
diff --git a/server/sonar-web/src/main/js/apps/groups/users-view.js b/server/sonar-web/src/main/js/apps/groups/users-view.js
index 5e8ad439d37..ca21c132758 100644
--- a/server/sonar-web/src/main/js/apps/groups/users-view.js
+++ b/server/sonar-web/src/main/js/apps/groups/users-view.js
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import Modal from '../../components/common/modals';
-import '../../components/common/select-list';
+import '../../components/SelectList';
 import Template from './templates/groups-users.hbs';
 
 export default Modal.extend({
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/groups-view.js b/server/sonar-web/src/main/js/apps/permission-templates/groups-view.js
index 978cb03e4ee..5fb20a259b8 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/groups-view.js
+++ b/server/sonar-web/src/main/js/apps/permission-templates/groups-view.js
@@ -19,7 +19,7 @@
  */
 import _ from 'underscore';
 import Modal from '../../components/common/modals';
-import '../../components/common/select-list';
+import '../../components/SelectList';
 import Template from './templates/permission-templates-groups.hbs';
 
 function getSearchUrl (permission, permissionTemplate) {
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/users-view.js b/server/sonar-web/src/main/js/apps/permission-templates/users-view.js
index 746097267d1..3b73dd2060f 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/users-view.js
+++ b/server/sonar-web/src/main/js/apps/permission-templates/users-view.js
@@ -19,7 +19,7 @@
  */
 import _ from 'underscore';
 import Modal from '../../components/common/modals';
-import '../../components/common/select-list';
+import '../../components/SelectList';
 import Template from './templates/permission-templates-users.hbs';
 
 export default Modal.extend({
diff --git a/server/sonar-web/src/main/js/apps/project-permissions/groups-view.js b/server/sonar-web/src/main/js/apps/project-permissions/groups-view.js
index bf9d695ce49..4603c21efc7 100644
--- a/server/sonar-web/src/main/js/apps/project-permissions/groups-view.js
+++ b/server/sonar-web/src/main/js/apps/project-permissions/groups-view.js
@@ -19,7 +19,7 @@
  */
 import _ from 'underscore';
 import Modal from '../../components/common/modals';
-import '../../components/common/select-list';
+import '../../components/SelectList';
 import Template from './templates/project-permissions-groups.hbs';
 
 function getSearchUrl (permission, project) {
diff --git a/server/sonar-web/src/main/js/apps/project-permissions/users-view.js b/server/sonar-web/src/main/js/apps/project-permissions/users-view.js
index c04bf3f74f9..42947b9ede7 100644
--- a/server/sonar-web/src/main/js/apps/project-permissions/users-view.js
+++ b/server/sonar-web/src/main/js/apps/project-permissions/users-view.js
@@ -19,7 +19,7 @@
  */
 import _ from 'underscore';
 import Modal from '../../components/common/modals';
-import '../../components/common/select-list';
+import '../../components/SelectList';
 import Template from './templates/project-permissions-users.hbs';
 
 export default Modal.extend({
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/gate-projects-view.js b/server/sonar-web/src/main/js/apps/quality-gates/gate-projects-view.js
index 75d846b77a5..ac2449ad86d 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/gate-projects-view.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/gate-projects-view.js
@@ -20,7 +20,7 @@
 import _ from 'underscore';
 import Marionette from 'backbone.marionette';
 import Template from './templates/quality-gate-detail-projects.hbs';
-import '../../components/common/select-list';
+import '../../components/SelectList';
 import { translate } from '../../helpers/l10n';
 
 export default Marionette.ItemView.extend({
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/profile-details-view.js b/server/sonar-web/src/main/js/apps/quality-profiles/profile-details-view.js
index 4101a1b4d8a..5fa02436f01 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/profile-details-view.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/profile-details-view.js
@@ -23,7 +23,7 @@ import Marionette from 'backbone.marionette';
 import ChangeProfileParentView from './change-profile-parent-view';
 import ProfileChangelogView from './profile-changelog-view';
 import ProfileComparisonView from './profile-comparison-view';
-import '../../components/common/select-list';
+import '../../components/SelectList';
 import Template from './templates/quality-profiles-profile-details.hbs';
 import { translate } from '../../helpers/l10n';
 
diff --git a/server/sonar-web/src/main/js/apps/users/groups-view.js b/server/sonar-web/src/main/js/apps/users/groups-view.js
index 2e5915b62d9..d619afacb50 100644
--- a/server/sonar-web/src/main/js/apps/users/groups-view.js
+++ b/server/sonar-web/src/main/js/apps/users/groups-view.js
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import Modal from '../../components/common/modals';
-import '../../components/common/select-list';
+import '../../components/SelectList';
 import Template from './templates/users-groups.hbs';
 
 export default Modal.extend({
diff --git a/server/sonar-web/src/main/js/components/common/select-list.js b/server/sonar-web/src/main/js/components/SelectList/index.js
index 414afbc35b5..b02014c4015 100644
--- a/server/sonar-web/src/main/js/components/common/select-list.js
+++ b/server/sonar-web/src/main/js/components/SelectList/index.js
@@ -21,6 +21,8 @@ import $ from 'jquery';
 import _ from 'underscore';
 import Backbone from 'backbone';
 import { translate } from '../../helpers/l10n';
+import ItemTemplate from './templates/item.hbs';
+import ListTemplate from './templates/list.hbs';
 
 var showError = null;
 
@@ -75,11 +77,7 @@ var SelectListCollection = Backbone.Collection.extend({
 
 var SelectListItemView = Backbone.View.extend({
   tagName: 'li',
-
-  template: function (d) {
-    return '<input class="select-list-list-checkbox" type="checkbox">' +
-        '<div class="select-list-list-item">' + d + '</div>';
-  },
+  template: ItemTemplate,
 
   events: {
     'change .select-list-list-checkbox': 'toggle'
@@ -96,9 +94,9 @@ var SelectListItemView = Backbone.View.extend({
     this.$el.toggleClass('selected', this.model.get('selected'));
     this.$('.select-list-list-checkbox')
         .prop('title',
-        this.model.get('selected') ?
-            this.settings.tooltips.deselect :
-            this.settings.tooltips.select)
+            this.model.get('selected') ?
+                this.settings.tooltips.deselect :
+                this.settings.tooltips.select)
         .prop('checked', this.model.get('selected'));
 
     if (this.settings.readOnly) {
@@ -128,17 +126,17 @@ var SelectListItemView = Backbone.View.extend({
 
     that.$el.addClass('progress');
     $.ajax({
-      url: url,
-      type: 'POST',
-      data: data,
-      statusCode: {
-        // do not show global error
-        400: null,
-        401: null,
-        403: null,
-        500: null
-      }
-    })
+          url: url,
+          type: 'POST',
+          data: data,
+          statusCode: {
+            // do not show global error
+            400: null,
+            401: null,
+            403: null,
+            500: null
+          }
+        })
         .done(function () {
           that.model.set('selected', !selected);
         })
@@ -158,27 +156,7 @@ var SelectListItemView = Backbone.View.extend({
  */
 
 var SelectListView = Backbone.View.extend({
-  template: function (l) {
-    /* eslint max-len: 0 */
-    return '<div class="select-list-container">' +
-        '<div class="select-list-control">' +
-        '<div class="select-list-check-control">' +
-        '<a class="select-list-control-button" name="selected">' + l.selected + '</a>' +
-        '<a class="select-list-control-button" name="deselected">' + l.deselected + '</a>' +
-        '<a class="select-list-control-button" name="all">' + l.all + '</a>' +
-        '</div>' +
-        '<div class="select-list-search-control">' +
-        '<form class="search-box">' +
-        '<span class="search-box-submit button-clean"><i class="icon-search"></i></span>' +
-        '<input class="search-box-input" type="search" name="q" placeholder="Search" maxlength="100" autocomplete="off">' +
-        '</form>' +
-        '</div>' +
-        '</div>' +
-        '<div class="select-list-list-container">' +
-        '<ul class="select-list-list"></ul>' +
-        '</div>' +
-        '</div>';
-  },
+  template: ListTemplate,
 
   events: {
     'click .select-list-control-button[name=selected]': 'showSelected',
diff --git a/server/sonar-web/src/main/js/components/SelectList/templates/item.hbs b/server/sonar-web/src/main/js/components/SelectList/templates/item.hbs
new file mode 100644
index 00000000000..347f383cbe5
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/SelectList/templates/item.hbs
@@ -0,0 +1,2 @@
+<input class="select-list-list-checkbox" type="checkbox">
+<div class="select-list-list-item">{{this}}</div>
diff --git a/server/sonar-web/src/main/js/components/SelectList/templates/list.hbs b/server/sonar-web/src/main/js/components/SelectList/templates/list.hbs
new file mode 100644
index 00000000000..6500857a106
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/SelectList/templates/list.hbs
@@ -0,0 +1,16 @@
+<div class="select-list-container">
+  <div class="select-list-control">
+    <div class="select-list-check-control">
+      <a class="select-list-control-button" name="selected">{{this.selected}}</a><a class="select-list-control-button" name="deselected">{{this.deselected}}</a><a class="select-list-control-button" name="all">{{this.all}}</a>
+    </div>
+    <div class="select-list-search-control">
+      <form class="search-box">
+        <span class="search-box-submit button-clean"><i class="icon-search"></i></span>
+        <input class="search-box-input" type="search" name="q" placeholder="Search" maxlength="100" autocomplete="off">
+      </form>
+    </div>
+  </div>
+  <div class="select-list-list-container">
+    <ul class="select-list-list"></ul>
+  </div>
+</div>