migrate js apps to es2015 modules

14 files changed, 422 insertions, 438 deletions

diff --git a/server/sonar-web/src/main/js/apps/groups/app.js b/server/sonar-web/src/main/js/apps/groups/app.js
index 55c6dfef534..8965f3ecea7 100644
--- a/server/sonar-web/src/main/js/apps/groups/app.js
+++ b/server/sonar-web/src/main/js/apps/groups/app.js
@@ -1,47 +1,46 @@
-define([
-  './layout',
-  './groups',
-  './header-view',
-  './search-view',
-  './list-view',
-  './list-footer-view'
-], function (Layout, Groups, HeaderView, SearchView, ListView, ListFooterView) {
-
-  var App = new Marionette.Application(),
-      init = function (options) {
-        // Layout
-        this.layout = new Layout({ el: options.el });
-        this.layout.render();
-
-        // Collection
-        this.groups = new Groups();
-
-        // Header View
-        this.headerView = new HeaderView({ collection: this.groups });
-        this.layout.headerRegion.show(this.headerView);
-
-        // Search View
-        this.searchView = new SearchView({ collection: this.groups });
-        this.layout.searchRegion.show(this.searchView);
-
-        // List View
-        this.listView = new ListView({ collection: this.groups });
-        this.layout.listRegion.show(this.listView);
-
-        // List Footer View
-        this.listFooterView = new ListFooterView({ collection: this.groups });
-        this.layout.listFooterRegion.show(this.listFooterView);
-
-        // Go!
-        this.groups.fetch();
-      };
-
-  App.on('start', function (options) {
-    window.requestMessages().done(function () {
-      init.call(App, options);
-    });
+import Marionette from 'backbone.marionette';
+import Layout from './layout';
+import Groups from './groups';
+import HeaderView from './header-view';
+import SearchView from './search-view';
+import ListView from './list-view';
+import ListFooterView from './list-footer-view';
+
+var App = new Marionette.Application(),
+    init = function (options) {
+      // Layout
+      this.layout = new Layout({ el: options.el });
+      this.layout.render();
+
+      // Collection
+      this.groups = new Groups();
+
+      // Header View
+      this.headerView = new HeaderView({ collection: this.groups });
+      this.layout.headerRegion.show(this.headerView);
+
+      // Search View
+      this.searchView = new SearchView({ collection: this.groups });
+      this.layout.searchRegion.show(this.searchView);
+
+      // List View
+      this.listView = new ListView({ collection: this.groups });
+      this.layout.listRegion.show(this.listView);
+
+      // List Footer View
+      this.listFooterView = new ListFooterView({ collection: this.groups });
+      this.layout.listFooterRegion.show(this.listFooterView);
+
+      // Go!
+      this.groups.fetch();
+    };
+
+App.on('start', function (options) {
+  window.requestMessages().done(function () {
+    init.call(App, options);
   });
+});
+
+export default App;
 
-  return App;
 
-});
diff --git a/server/sonar-web/src/main/js/apps/groups/create-view.js b/server/sonar-web/src/main/js/apps/groups/create-view.js
index cddde867a99..2f3edf11fa0 100644
--- a/server/sonar-web/src/main/js/apps/groups/create-view.js
+++ b/server/sonar-web/src/main/js/apps/groups/create-view.js
@@ -1,30 +1,28 @@
-define([
-  './group',
-  './form-view'
-], function (Group, FormView) {
+import Group from './group';
+import FormView from './form-view';
 
-  return FormView.extend({
-
-    sendRequest: function () {
-      var that = this,
-          group = new Group({
-            name: this.$('#create-group-name').val(),
-            description: this.$('#create-group-description').val()
-          });
-      this.disableForm();
-      return group.save(null, {
-        statusCode: {
-          // do not show global error
-          400: null
-        }
-      }).done(function () {
-        that.collection.refresh();
-        that.destroy();
-      }).fail(function (jqXHR) {
-        that.enableForm();
-        that.showErrors(jqXHR.responseJSON.errors, jqXHR.responseJSON.warnings);
-      });
-    }
-  });
+export default FormView.extend({
 
+  sendRequest: function () {
+    var that = this,
+        group = new Group({
+          name: this.$('#create-group-name').val(),
+          description: this.$('#create-group-description').val()
+        });
+    this.disableForm();
+    return group.save(null, {
+      statusCode: {
+        // do not show global error
+        400: null
+      }
+    }).done(function () {
+      that.collection.refresh();
+      that.destroy();
+    }).fail(function (jqXHR) {
+      that.enableForm();
+      that.showErrors(jqXHR.responseJSON.errors, jqXHR.responseJSON.warnings);
+    });
+  }
 });
+
+
diff --git a/server/sonar-web/src/main/js/apps/groups/delete-view.js b/server/sonar-web/src/main/js/apps/groups/delete-view.js
index 85b33a632b5..272a0a85bbc 100644
--- a/server/sonar-web/src/main/js/apps/groups/delete-view.js
+++ b/server/sonar-web/src/main/js/apps/groups/delete-view.js
@@ -1,38 +1,36 @@
-define([
-  'components/common/modal-form',
-  './templates'
-], function (ModalForm) {
+import ModalForm from 'components/common/modal-form';
+import './templates';
 
-  return ModalForm.extend({
-    template: Templates['groups-delete'],
+export default ModalForm.extend({
+  template: Templates['groups-delete'],
 
-    onFormSubmit: function (e) {
-      this._super(e);
-      this.sendRequest();
-    },
+  onFormSubmit: function (e) {
+    this._super(e);
+    this.sendRequest();
+  },
 
-    sendRequest: function () {
-      var that = this,
-          collection = this.model.collection;
-      return this.model.destroy({
-        wait: true,
-        statusCode: {
-          // do not show global error
-          400: null
-        }
-      }).done(function () {
-        collection.total--;
-        that.destroy();
-      }).fail(function (jqXHR) {
-        that.showErrors(jqXHR.responseJSON.errors, jqXHR.responseJSON.warnings);
-      });
-    },
-
-    showErrors: function (errors, warnings) {
-      this.$('.js-modal-text').addClass('hidden');
-      this.disableForm();
-      this._super(errors, warnings);
-    }
-  });
+  sendRequest: function () {
+    var that = this,
+        collection = this.model.collection;
+    return this.model.destroy({
+      wait: true,
+      statusCode: {
+        // do not show global error
+        400: null
+      }
+    }).done(function () {
+      collection.total--;
+      that.destroy();
+    }).fail(function (jqXHR) {
+      that.showErrors(jqXHR.responseJSON.errors, jqXHR.responseJSON.warnings);
+    });
+  },
 
+  showErrors: function (errors, warnings) {
+    this.$('.js-modal-text').addClass('hidden');
+    this.disableForm();
+    this._super(errors, warnings);
+  }
 });
+
+
diff --git a/server/sonar-web/src/main/js/apps/groups/form-view.js b/server/sonar-web/src/main/js/apps/groups/form-view.js
index 7e3c26b98ee..5b541f1ae12 100644
--- a/server/sonar-web/src/main/js/apps/groups/form-view.js
+++ b/server/sonar-web/src/main/js/apps/groups/form-view.js
@@ -1,25 +1,23 @@
-define([
-  'components/common/modal-form',
-  './templates'
-], function (ModalForm) {
+import ModalForm from 'components/common/modal-form';
+import './templates';
 
-  return ModalForm.extend({
-    template: Templates['groups-form'],
+export default ModalForm.extend({
+  template: Templates['groups-form'],
 
-    onRender: function () {
-      this._super();
-      this.$('[data-toggle="tooltip"]').tooltip({ container: 'body', placement: 'bottom' });
-    },
+  onRender: function () {
+    this._super();
+    this.$('[data-toggle="tooltip"]').tooltip({ container: 'body', placement: 'bottom' });
+  },
 
-    onDestroy: function () {
-      this._super();
-      this.$('[data-toggle="tooltip"]').tooltip('destroy');
-    },
-
-    onFormSubmit: function (e) {
-      this._super(e);
-      this.sendRequest();
-    }
-  });
+  onDestroy: function () {
+    this._super();
+    this.$('[data-toggle="tooltip"]').tooltip('destroy');
+  },
 
+  onFormSubmit: function (e) {
+    this._super(e);
+    this.sendRequest();
+  }
 });
+
+
diff --git a/server/sonar-web/src/main/js/apps/groups/group.js b/server/sonar-web/src/main/js/apps/groups/group.js
index aced6727b91..89018901895 100644
--- a/server/sonar-web/src/main/js/apps/groups/group.js
+++ b/server/sonar-web/src/main/js/apps/groups/group.js
@@ -1,36 +1,37 @@
-define(function () {
+import _ from 'underscore';
+import Backbone from 'backbone';
 
-  return Backbone.Model.extend({
-    urlRoot: function () {
-      return baseUrl + '/api/usergroups';
-    },
+export default Backbone.Model.extend({
+  urlRoot: function () {
+    return baseUrl + '/api/usergroups';
+  },
 
-    sync: function (method, model, options) {
-      var opts = options || {};
-      if (method === 'create') {
-        _.defaults(opts, {
-          url: this.urlRoot() + '/create',
-          type: 'POST',
-          data: _.pick(model.toJSON(), 'name', 'description')
-        });
-      }
-      if (method === 'update') {
-        var attrs = _.extend(_.pick(model.changed, 'name', 'description'), { id: model.id });
-        _.defaults(opts, {
-          url: this.urlRoot() + '/update',
-          type: 'POST',
-          data: attrs
-        });
-      }
-      if (method === 'delete') {
-        _.defaults(opts, {
-          url: this.urlRoot() + '/delete',
-          type: 'POST',
-          data: { id: this.id }
-        });
-      }
-      return Backbone.ajax(opts);
+  sync: function (method, model, options) {
+    var opts = options || {};
+    if (method === 'create') {
+      _.defaults(opts, {
+        url: this.urlRoot() + '/create',
+        type: 'POST',
+        data: _.pick(model.toJSON(), 'name', 'description')
+      });
     }
-  });
-
+    if (method === 'update') {
+      var attrs = _.extend(_.pick(model.changed, 'name', 'description'), { id: model.id });
+      _.defaults(opts, {
+        url: this.urlRoot() + '/update',
+        type: 'POST',
+        data: attrs
+      });
+    }
+    if (method === 'delete') {
+      _.defaults(opts, {
+        url: this.urlRoot() + '/delete',
+        type: 'POST',
+        data: { id: this.id }
+      });
+    }
+    return Backbone.ajax(opts);
+  }
 });
+
+
diff --git a/server/sonar-web/src/main/js/apps/groups/groups.js b/server/sonar-web/src/main/js/apps/groups/groups.js
index dcfbb8c731b..d22d3373d9a 100644
--- a/server/sonar-web/src/main/js/apps/groups/groups.js
+++ b/server/sonar-web/src/main/js/apps/groups/groups.js
@@ -1,40 +1,39 @@
-define([
-  './group'
-], function (Group) {
+import Backbone from 'backbone';
+import Group from './group';
+
+export default Backbone.Collection.extend({
+  model: Group,
+
+  url: function () {
+    return baseUrl + '/api/usergroups/search';
+  },
+
+  parse: function (r) {
+    this.total = +r.total;
+    this.p = +r.p;
+    this.ps = +r.ps;
+    return r.groups;
+  },
+
+  fetch: function (options) {
+    var d = (options && options.data) || {};
+    this.q = d.q;
+    return this._super(options);
+  },
+
+  fetchMore: function () {
+    var p = this.p + 1;
+    return this.fetch({ add: true, remove: false, data: { p: p, ps: this.ps, q: this.q } });
+  },
+
+  refresh: function () {
+    return this.fetch({ reset: true, data: { q: this.q } });
+  },
+
+  hasMore: function () {
+    return this.total > this.p * this.ps;
+  }
 
-  return Backbone.Collection.extend({
-    model: Group,
-
-    url: function () {
-      return baseUrl + '/api/usergroups/search';
-    },
-
-    parse: function (r) {
-      this.total = +r.total;
-      this.p = +r.p;
-      this.ps = +r.ps;
-      return r.groups;
-    },
-
-    fetch: function (options) {
-      var d = (options && options.data) || {};
-      this.q = d.q;
-      return this._super(options);
-    },
-
-    fetchMore: function () {
-      var p = this.p + 1;
-      return this.fetch({ add: true, remove: false, data: { p: p, ps: this.ps, q: this.q } });
-    },
-
-    refresh: function () {
-      return this.fetch({ reset: true, data: { q: this.q } });
-    },
-
-    hasMore: function () {
-      return this.total > this.p * this.ps;
-    }
+});
 
-  });
 
-});
diff --git a/server/sonar-web/src/main/js/apps/groups/header-view.js b/server/sonar-web/src/main/js/apps/groups/header-view.js
index da6f7f60919..bd7226176b2 100644
--- a/server/sonar-web/src/main/js/apps/groups/header-view.js
+++ b/server/sonar-web/src/main/js/apps/groups/header-view.js
@@ -1,25 +1,24 @@
-define([
-  './create-view',
-  './templates'
-], function (CreateView) {
+import Marionette from 'backbone.marionette';
+import CreateView from './create-view';
+import './templates';
 
-  return Marionette.ItemView.extend({
-    template: Templates['groups-header'],
+export default Marionette.ItemView.extend({
+  template: Templates['groups-header'],
 
-    events: {
-      'click #groups-create': 'onCreateClick'
-    },
+  events: {
+    'click #groups-create': 'onCreateClick'
+  },
 
-    onCreateClick: function (e) {
-      e.preventDefault();
-      this.createGroup();
-    },
-
-    createGroup: function () {
-      new CreateView({
-        collection: this.collection
-      }).render();
-    }
-  });
+  onCreateClick: function (e) {
+    e.preventDefault();
+    this.createGroup();
+  },
 
+  createGroup: function () {
+    new CreateView({
+      collection: this.collection
+    }).render();
+  }
 });
+
+
diff --git a/server/sonar-web/src/main/js/apps/groups/layout.js b/server/sonar-web/src/main/js/apps/groups/layout.js
index 18f6c7738d1..ba1f58e81fc 100644
--- a/server/sonar-web/src/main/js/apps/groups/layout.js
+++ b/server/sonar-web/src/main/js/apps/groups/layout.js
@@ -1,16 +1,15 @@
-define([
-  './templates'
-], function () {
+import Marionette from 'backbone.marionette';
+import './templates';
 
-  return Marionette.LayoutView.extend({
-    template: Templates['groups-layout'],
-
-    regions: {
-      headerRegion: '#groups-header',
-      searchRegion: '#groups-search',
-      listRegion: '#groups-list',
-      listFooterRegion: '#groups-list-footer'
-    }
-  });
+export default Marionette.LayoutView.extend({
+  template: Templates['groups-layout'],
 
+  regions: {
+    headerRegion: '#groups-header',
+    searchRegion: '#groups-search',
+    listRegion: '#groups-list',
+    listFooterRegion: '#groups-list-footer'
+  }
 });
+
+
diff --git a/server/sonar-web/src/main/js/apps/groups/list-footer-view.js b/server/sonar-web/src/main/js/apps/groups/list-footer-view.js
index 3c0fbe198c5..53dc3e7acaa 100644
--- a/server/sonar-web/src/main/js/apps/groups/list-footer-view.js
+++ b/server/sonar-web/src/main/js/apps/groups/list-footer-view.js
@@ -1,34 +1,34 @@
-define([
-  './templates'
-], function () {
-
-  return Marionette.ItemView.extend({
-    template: Templates['groups-list-footer'],
-
-    collectionEvents: {
-      'all': 'render'
-    },
-
-    events: {
-      'click #groups-fetch-more': 'onMoreClick'
-    },
-
-    onMoreClick: function (e) {
-      e.preventDefault();
-      this.fetchMore();
-    },
-
-    fetchMore: function () {
-      this.collection.fetchMore();
-    },
-
-    serializeData: function () {
-      return _.extend(this._super(), {
-        total: this.collection.total,
-        count: this.collection.length,
-        more: this.collection.hasMore()
-      });
-    }
-  });
+import _ from 'underscore';
+import Marionette from 'backbone.marionette';
+import './templates';
 
+export default Marionette.ItemView.extend({
+  template: Templates['groups-list-footer'],
+
+  collectionEvents: {
+    'all': 'render'
+  },
+
+  events: {
+    'click #groups-fetch-more': 'onMoreClick'
+  },
+
+  onMoreClick: function (e) {
+    e.preventDefault();
+    this.fetchMore();
+  },
+
+  fetchMore: function () {
+    this.collection.fetchMore();
+  },
+
+  serializeData: function () {
+    return _.extend(this._super(), {
+      total: this.collection.total,
+      count: this.collection.length,
+      more: this.collection.hasMore()
+    });
+  }
 });
+
+
diff --git a/server/sonar-web/src/main/js/apps/groups/list-item-view.js b/server/sonar-web/src/main/js/apps/groups/list-item-view.js
index 45ce8b9688a..43278c2ac6e 100644
--- a/server/sonar-web/src/main/js/apps/groups/list-item-view.js
+++ b/server/sonar-web/src/main/js/apps/groups/list-item-view.js
@@ -1,62 +1,60 @@
-define([
-  './update-view',
-  './delete-view',
-  './users-view',
-  './templates'
-], function (UpdateView, DeleteView, UsersView) {
-
-  var $ = jQuery;
-
-  return Marionette.ItemView.extend({
-    tagName: 'li',
-    className: 'panel panel-vertical',
-    template: Templates['groups-list-item'],
-
-    events: {
-      'click .js-group-update': 'onUpdateClick',
-      'click .js-group-delete': 'onDeleteClick',
-      'click .js-group-users': 'onUsersClick'
-    },
-
-    onRender: function () {
-      this.$el.attr('data-id', this.model.id);
-      this.$('[data-toggle="tooltip"]').tooltip({ container: 'body', placement: 'bottom' });
-    },
-
-    onDestroy: function () {
-      this.$('[data-toggle="tooltip"]').tooltip('destroy');
-    },
-
-    onUpdateClick: function (e) {
-      e.preventDefault();
-      this.updateGroup();
-    },
-
-    onDeleteClick: function (e) {
-      e.preventDefault();
-      this.deleteGroup();
-    },
-
-    onUsersClick: function (e) {
-      e.preventDefault();
-      $('.tooltip').remove();
-      this.showUsers();
-    },
-
-    updateGroup: function () {
-      new UpdateView({
-        model: this.model,
-        collection: this.model.collection
-      }).render();
-    },
-
-    deleteGroup: function () {
-      new DeleteView({ model: this.model }).render();
-    },
-
-    showUsers: function () {
-      new UsersView({ model: this.model }).render();
-    }
-  });
-
+import $ from 'jquery';
+import Marionette from 'backbone.marionette';
+import UpdateView from './update-view';
+import DeleteView from './delete-view';
+import UsersView from './users-view';
+import './templates';
+
+export default Marionette.ItemView.extend({
+  tagName: 'li',
+  className: 'panel panel-vertical',
+  template: Templates['groups-list-item'],
+
+  events: {
+    'click .js-group-update': 'onUpdateClick',
+    'click .js-group-delete': 'onDeleteClick',
+    'click .js-group-users': 'onUsersClick'
+  },
+
+  onRender: function () {
+    this.$el.attr('data-id', this.model.id);
+    this.$('[data-toggle="tooltip"]').tooltip({ container: 'body', placement: 'bottom' });
+  },
+
+  onDestroy: function () {
+    this.$('[data-toggle="tooltip"]').tooltip('destroy');
+  },
+
+  onUpdateClick: function (e) {
+    e.preventDefault();
+    this.updateGroup();
+  },
+
+  onDeleteClick: function (e) {
+    e.preventDefault();
+    this.deleteGroup();
+  },
+
+  onUsersClick: function (e) {
+    e.preventDefault();
+    $('.tooltip').remove();
+    this.showUsers();
+  },
+
+  updateGroup: function () {
+    new UpdateView({
+      model: this.model,
+      collection: this.model.collection
+    }).render();
+  },
+
+  deleteGroup: function () {
+    new DeleteView({ model: this.model }).render();
+  },
+
+  showUsers: function () {
+    new UsersView({ model: this.model }).render();
+  }
 });
+
+
diff --git a/server/sonar-web/src/main/js/apps/groups/list-view.js b/server/sonar-web/src/main/js/apps/groups/list-view.js
index 24878864d30..695bf2ac034 100644
--- a/server/sonar-web/src/main/js/apps/groups/list-view.js
+++ b/server/sonar-web/src/main/js/apps/groups/list-view.js
@@ -1,11 +1,10 @@
-define([
-  './list-item-view',
-  './templates'
-], function (ListItemView) {
-
-  return Marionette.CollectionView.extend({
-    tagName: 'ul',
-    childView: ListItemView
-  });
+import Marionette from 'backbone.marionette';
+import ListItemView from './list-item-view';
+import './templates';
 
+export default Marionette.CollectionView.extend({
+  tagName: 'ul',
+  childView: ListItemView
 });
+
+
diff --git a/server/sonar-web/src/main/js/apps/groups/search-view.js b/server/sonar-web/src/main/js/apps/groups/search-view.js
index 1540d7eb36e..db3d4d8bb18 100644
--- a/server/sonar-web/src/main/js/apps/groups/search-view.js
+++ b/server/sonar-web/src/main/js/apps/groups/search-view.js
@@ -1,49 +1,49 @@
-define([
-  './templates'
-], function () {
-
-  return Marionette.ItemView.extend({
-    template: Templates['groups-search'],
-
-    events: {
-      'submit #groups-search-form': 'onFormSubmit',
-      'search #groups-search-query': 'debouncedOnKeyUp',
-      'keyup #groups-search-query': 'debouncedOnKeyUp'
-    },
-
-    initialize: function () {
-      this._bufferedValue = null;
-      this.debouncedOnKeyUp = _.debounce(this.onKeyUp, 400);
-    },
-
-    onRender: function () {
-      this.delegateEvents();
-    },
-
-    onFormSubmit: function (e) {
-      e.preventDefault();
-      this.debouncedOnKeyUp();
-    },
-
-    onKeyUp: function () {
-      var q = this.getQuery();
-      if (q === this._bufferedValue) {
-        return;
-      }
-      this._bufferedValue = this.getQuery();
-      if (this.searchRequest != null) {
-        this.searchRequest.abort();
-      }
-      this.searchRequest = this.search(q);
-    },
-
-    getQuery: function () {
-      return this.$('#groups-search-query').val();
-    },
-
-    search: function (q) {
-      return this.collection.fetch({ reset: true, data: { q: q } });
+import _ from 'underscore';
+import Marionette from 'backbone.marionette';
+import './templates';
+
+export default Marionette.ItemView.extend({
+  template: Templates['groups-search'],
+
+  events: {
+    'submit #groups-search-form': 'onFormSubmit',
+    'search #groups-search-query': 'debouncedOnKeyUp',
+    'keyup #groups-search-query': 'debouncedOnKeyUp'
+  },
+
+  initialize: function () {
+    this._bufferedValue = null;
+    this.debouncedOnKeyUp = _.debounce(this.onKeyUp, 400);
+  },
+
+  onRender: function () {
+    this.delegateEvents();
+  },
+
+  onFormSubmit: function (e) {
+    e.preventDefault();
+    this.debouncedOnKeyUp();
+  },
+
+  onKeyUp: function () {
+    var q = this.getQuery();
+    if (q === this._bufferedValue) {
+      return;
     }
-  });
+    this._bufferedValue = this.getQuery();
+    if (this.searchRequest != null) {
+      this.searchRequest.abort();
+    }
+    this.searchRequest = this.search(q);
+  },
+
+  getQuery: function () {
+    return this.$('#groups-search-query').val();
+  },
 
+  search: function (q) {
+    return this.collection.fetch({ reset: true, data: { q: q } });
+  }
 });
+
+
diff --git a/server/sonar-web/src/main/js/apps/groups/update-view.js b/server/sonar-web/src/main/js/apps/groups/update-view.js
index 850ddb7510f..c93608b197b 100644
--- a/server/sonar-web/src/main/js/apps/groups/update-view.js
+++ b/server/sonar-web/src/main/js/apps/groups/update-view.js
@@ -1,29 +1,27 @@
-define([
-  './form-view'
-], function (FormView) {
+import FormView from './form-view';
 
-  return FormView.extend({
-
-    sendRequest: function () {
-      var that = this;
-      this.model.set({
-        name: this.$('#create-group-name').val(),
-        description: this.$('#create-group-description').val()
-      });
-      this.disableForm();
-      return this.model.save(null, {
-        statusCode: {
-          // do not show global error
-          400: null
-        }
-      }).done(function () {
-        that.collection.refresh();
-        that.destroy();
-      }).fail(function (jqXHR) {
-        that.enableForm();
-        that.showErrors(jqXHR.responseJSON.errors, jqXHR.responseJSON.warnings);
-      });
-    }
-  });
+export default FormView.extend({
 
+  sendRequest: function () {
+    var that = this;
+    this.model.set({
+      name: this.$('#create-group-name').val(),
+      description: this.$('#create-group-description').val()
+    });
+    this.disableForm();
+    return this.model.save(null, {
+      statusCode: {
+        // do not show global error
+        400: null
+      }
+    }).done(function () {
+      that.collection.refresh();
+      that.destroy();
+    }).fail(function (jqXHR) {
+      that.enableForm();
+      that.showErrors(jqXHR.responseJSON.errors, jqXHR.responseJSON.warnings);
+    });
+  }
 });
+
+
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 de5901fc5f1..8c815ff2e4d 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
@@ -1,42 +1,40 @@
-define([
-  'components/common/modals',
-  'components/common/select-list',
-  './templates'
-], function (Modal) {
+import Modal from 'components/common/modals';
+import 'components/common/select-list';
+import './templates';
 
-  return Modal.extend({
-    template: Templates['groups-users'],
+export default Modal.extend({
+  template: Templates['groups-users'],
 
-    onRender: function () {
-      this._super();
-      new window.SelectList({
-        el: this.$('#groups-users'),
-        width: '100%',
-        readOnly: false,
-        focusSearch: false,
-        format: function (item) {
-          return item.name + '<br><span class="note">' + item.login + '</span>';
-        },
-        queryParam: 'q',
-        searchUrl: baseUrl + '/api/usergroups/users?ps=100&id=' + this.model.id,
-        selectUrl: baseUrl + '/api/usergroups/add_user',
-        deselectUrl: baseUrl + '/api/usergroups/remove_user',
-        extra: {
-          id: this.model.id
-        },
-        selectParameter: 'login',
-        selectParameterValue: 'login',
-        parse: function (r) {
-          this.more = false;
-          return r.users;
-        }
-      });
-    },
-
-    onDestroy: function () {
-      this.model.collection.refresh();
-      this._super();
-    }
-  });
+  onRender: function () {
+    this._super();
+    new window.SelectList({
+      el: this.$('#groups-users'),
+      width: '100%',
+      readOnly: false,
+      focusSearch: false,
+      format: function (item) {
+        return item.name + '<br><span class="note">' + item.login + '</span>';
+      },
+      queryParam: 'q',
+      searchUrl: baseUrl + '/api/usergroups/users?ps=100&id=' + this.model.id,
+      selectUrl: baseUrl + '/api/usergroups/add_user',
+      deselectUrl: baseUrl + '/api/usergroups/remove_user',
+      extra: {
+        id: this.model.id
+      },
+      selectParameter: 'login',
+      selectParameterValue: 'login',
+      parse: function (r) {
+        this.more = false;
+        return r.users;
+      }
+    });
+  },
 
+  onDestroy: function () {
+    this.model.collection.refresh();
+    this._super();
+  }
 });
+
+