Transform group select into group dropdown

- Create TransferDropdown JS module
- Readjust styles and view

6 files changed, 60 insertions, 15 deletions

diff --git a/app/assets/javascripts/groups/transfer_dropdown.js b/app/assets/javascripts/groups/transfer_dropdown.js
new file mode 100644
index 00000000000..76100e20bb5
--- /dev/null
+++ b/app/assets/javascripts/groups/transfer_dropdown.js
@@ -0,0 +1,34 @@
+export default class TransferDropdown {
+  constructor(){
+    this.groupDropdown = $('.js-groups-dropdown');
+    this.parentInput = $('#new_parent_group_id')
+    this.data = this.groupDropdown.data('data')
+    this.init();
+  }
+
+  init(){
+    this.buildDropdown()
+  }
+
+  buildDropdown() {
+    const extraOptions = [{ id: '', text: 'No parent group' }, 'divider']
+
+    this.groupDropdown.glDropdown({
+      selectable: true,
+      filterable: true,
+      toggleLabel: item => item.text,
+      search: { fields: ['text'] },
+      data: extraOptions.concat(this.data),
+      text: item => item.text,
+      clicked: (options) => {
+        const { e } = options;
+        e.preventDefault();
+        this.assignSelected(options.selectedObj);
+      }
+    });
+  }
+
+  assignSelected(selected) {
+    this.parentInput.val(selected["id"])
+  }
+}
diff --git a/app/assets/javascripts/pages/groups/edit/index.js b/app/assets/javascripts/pages/groups/edit/index.js
index 48e8c9550bf..5e9fbb6ce3b 100644
--- a/app/assets/javascripts/pages/groups/edit/index.js
+++ b/app/assets/javascripts/pages/groups/edit/index.js
@@ -1,3 +1,7 @@
 import groupAvatar from '~/group_avatar';
+import TransferDropdown from '~/groups/transfer_dropdown';
 
-export default groupAvatar;
+export default () => {
+  groupAvatar();
+  new TransferDropdown();
+}
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index f9a761e85fe..d637c31737e 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -224,3 +224,7 @@
   border-radius: $label-border-radius;
   font-weight: $gl-font-weight-normal;
 }
+
+.js-groups-dropdown {
+  width: 100%;
+}
diff --git a/app/controllers/concerns/routable_actions.rb b/app/controllers/concerns/routable_actions.rb
index f745deb083c..d5f817a10e0 100644
--- a/app/controllers/concerns/routable_actions.rb
+++ b/app/controllers/concerns/routable_actions.rb
@@ -25,7 +25,7 @@ module RoutableActions
   end
 
   def ensure_canonical_path(routable, requested_full_path)
-    return unless request.get?
+    return unless request.get? && !flash[:alert].present?
 
     canonical_path = routable.full_path
     if canonical_path != requested_full_path
diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb
index d6807604804..09450eaa5b7 100644
--- a/app/helpers/groups_helper.rb
+++ b/app/helpers/groups_helper.rb
@@ -88,9 +88,13 @@ module GroupsHelper
     end
   end
 
-  def parent_group_options
-    groups = current_user.owned_groups.sort_by(&:human_name)
-    options_for_select(groups.map { |group| [group.human_name, group.id] })
+  def parent_group_options(current_group)
+    groups = current_user.owned_groups.sort_by(&:human_name).map do |group|
+      { id: group.id, text: group.human_name }
+    end
+
+    groups.delete_if { |group| group[:id] == current_group.id }
+    groups.to_json
   end
 
   def supports_nested_groups?
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index e5a2822fc5a..81c9f568f3f 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -63,16 +63,15 @@
     .panel-body
       = form_for @group, url: transfer_group_path(@group), method: :put do |f|
         .form-group
-          = label_tag :new_parent_group_id, nil, class: 'label-light' do
-            %span Parent Group
-          .form-group
-            = select_tag :new_parent_group_id, parent_group_options, include_blank: 'No parent group', class: 'select2'
-          %ul
-            %li 
-              = "Be careful. Changing a group's parent can have unintended #{link_to 'side effects', 'https://docs.gitlab.com/ce/user/project/index.html#redirects-when-changing-repository-paths', target: 'blank'}."
-            %li You can only transfer the group to a group you manage.
-            %li You will need to update your local repositories to point to the new location.
-            %li Group and project visibility levels will be changed to match the new parent group's values.
+          = dropdown_tag('Select parent group', options: { toggle_class: 'js-groups-dropdown', title: 'Parent Group', filter: true, dropdown_class: 'dropdown-menu-selectable', placeholder: "Search groups", data: { data: parent_group_options(@group) } })
+          = hidden_field_tag 'new_parent_group_id'
+         
+        %ul
+          %li 
+            = "Be careful. Changing a group's parent can have unintended #{link_to 'side effects', 'https://docs.gitlab.com/ce/user/project/index.html#redirects-when-changing-repository-paths', target: 'blank'}."
+          %li You can only transfer the group to a group you manage.
+          %li You will need to update your local repositories to point to the new location.
+          %li Group and project visibility levels will be changed to match the new parent group's values.
         = f.submit 'Transfer group', class: "btn btn-warning"
 
 = render 'shared/confirm_modal', phrase: @group.path