Finished up mattermost team creationzj-create-mattermost-team-lb

6 files changed, 61 insertions, 15 deletions

diff --git a/app/assets/javascripts/behaviors/bind_in_out.js.es6 b/app/assets/javascripts/behaviors/bind_in_out.js.es6
new file mode 100644
index 00000000000..3cb892451e3
--- /dev/null
+++ b/app/assets/javascripts/behaviors/bind_in_out.js.es6
@@ -0,0 +1,48 @@
+class BindInOut {
+  constructor(bindIn, bindOut) {
+    this.in = bindIn;
+    this.out = bindOut;
+
+    this.eventWrapper = {};
+    this.eventType = /(INPUT|TEXTAREA)/.test(bindIn.tagName) ? 'keyup' : 'change';
+  }
+
+  addEvents() {
+    this.eventWrapper.updateOut = this.updateOut.bind(this);
+
+    this.in.addEventListener(this.eventType, this.eventWrapper.updateOut);
+
+    return this;
+  }
+
+  updateOut() {
+    this.out.textContent = this.in.value;
+
+    return this;
+  }
+
+  removeEvents() {
+    this.in.removeEventListener(this.eventType, this.eventWrapper.updateOut);
+
+    return this;
+  }
+
+  static initAll() {
+    const ins = document.querySelectorAll('*[data-bind-in]');
+
+    return [].map.call(ins, anIn => BindInOut.init(anIn));
+  }
+
+  static init(anIn, anOut) {
+    const out = anOut || document.querySelector(`*[data-bind-out="${anIn.dataset.bindIn}"]`);
+    const bindInOut = new BindInOut(anIn, out);
+
+    return bindInOut.addEvents().updateOut();
+  }
+}
+
+const global = window.gl || (window.gl = {});
+
+global.BindInOut = BindInOut;
+
+module.exports = BindInOut;
diff --git a/app/assets/javascripts/behaviors/toggler_behavior.js b/app/assets/javascripts/behaviors/toggler_behavior.js
index a7181904ac9..2d98fc5a545 100644
--- a/app/assets/javascripts/behaviors/toggler_behavior.js
+++ b/app/assets/javascripts/behaviors/toggler_behavior.js
@@ -22,7 +22,6 @@
     //   %div.js-toggle-content
     //
     $('body').on('click', '.js-toggle-button', function(e) {
-      e.preventDefault();
       toggleContainer($(this).closest('.js-toggle-container'));
     });
 
diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6
index 45aa6050aed..f7ab9eefab1 100644
--- a/app/assets/javascripts/dispatcher.js.es6
+++ b/app/assets/javascripts/dispatcher.js.es6
@@ -216,6 +216,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'admin:groups:edit':
         case 'admin:groups:new':
           new GroupAvatar();
+          gl.BindInOut.initAll();
           break;
         case 'projects:tree:show':
           shortcut_handler = new ShortcutsNavigation();
diff --git a/app/controllers/groups_controller.rb b/app/controllers/groups_controller.rb
index 0e421b915cf..5b1898b0ee1 100644
--- a/app/controllers/groups_controller.rb
+++ b/app/controllers/groups_controller.rb
@@ -81,7 +81,6 @@ class GroupsController < Groups::ApplicationController
   end
 
   def update
-    byebug
     if Groups::UpdateService.new(@group, current_user, group_params).execute
       redirect_to edit_group_path(@group), notice: "Group '#{@group.name}' was successfully updated."
     else
@@ -143,7 +142,7 @@ class GroupsController < Groups::ApplicationController
       :request_access_enabled,
       :share_with_group_lock,
       :visibility_level,
-      :parent_id
+      :parent_id,
       :create_chat_team,
       :chat_team_name
     ]
diff --git a/app/views/groups/_create_chat_team.html.haml b/app/views/groups/_create_chat_team.html.haml
index 1e702c4f20f..8b908e233dc 100644
--- a/app/views/groups/_create_chat_team.html.haml
+++ b/app/views/groups/_create_chat_team.html.haml
@@ -4,15 +4,13 @@
       = custom_icon('icon_mattermost')
     Mattermost
   .col-sm-10
-    .checkbox
+    .checkbox.js-toggle-container
       = f.label :create_chat_team do
-        = f.check_box(:create_chat_team, { checked: @group.chat_team }, 'true', 'false')
-        Link the group to a new Mattermost team
-
-.form-group
-  = f.label :chat_team, class: 'control-label' do
-    Chat Team name
-  .col-sm-10
-    = f.text_field :chat_team, placeholder: @group.chat_team, class: 'form-control mattermost-team-name'
-    %small
-      Leave blank to match your group name
+        .js-toggle-button= f.check_box(:create_chat_team, { checked: true }, 'true', 'false')
+        Create a Mattermost team for this group
+      %br
+      %small.light.js-toggle-content
+        Team URL:
+        = Settings.mattermost.host
+        %span> /
+        %span{ "data-bind-out" => "create_chat_team"}
diff --git a/app/views/shared/_group_form.html.haml b/app/views/shared/_group_form.html.haml
index efb207b9916..5b8c9a66205 100644
--- a/app/views/shared/_group_form.html.haml
+++ b/app/views/shared/_group_form.html.haml
@@ -18,7 +18,8 @@
       = f.text_field :path, placeholder: 'open-source', class: 'form-control',
         autofocus: local_assigns[:autofocus] || false, required: true,
         pattern: Gitlab::Regex::NAMESPACE_REGEX_STR_SIMPLE,
-        title: 'Please choose a group name with no special characters.'
+        title: 'Please choose a group name with no special characters.',
+        "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
       - if parent
         = f.hidden_field :parent_id, value: parent.id