6 files changed, 19 insertions, 19 deletions
diff --git a/app/views/dashboard/groups/_groups.html.haml b/app/views/dashboard/groups/_groups.html.haml
deleted file mode 100644
index 168e6272d8e..00000000000
--- a/app/views/dashboard/groups/_groups.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-.js-groups-list-holder
-  #dashboard-group-app{ data: { endpoint: dashboard_groups_path(format: :json), path: dashboard_groups_path } }
-    .groups-list-loading
-      = icon('spinner spin', 'v-show' => 'isLoading')
-    %template{ 'v-if' => '!isLoading && isEmpty' }
-      %div{ 'v-cloak' => true }
-        = render 'empty_state'
-    %template{ 'v-else-if' => '!isLoading && !isEmpty' }
-      %groups-component{ ':groups' => 'state.groups', ':page-info' => 'state.pageInfo' }
diff --git a/app/views/dashboard/groups/index.html.haml b/app/views/dashboard/groups/index.html.haml
index 1cea8182733..ff058da8af5 100644
--- a/app/views/dashboard/groups/index.html.haml
+++ b/app/views/dashboard/groups/index.html.haml
@@ -3,10 +3,7 @@
 - header_title  "Groups", dashboard_groups_path
 = render 'dashboard/groups_head'
 
-= webpack_bundle_tag 'common_vue'
-= webpack_bundle_tag 'groups'
-
 - if @groups.empty?
-  = render 'empty_state'
+  = render 'shared/groups/empty_state'
 - else
-  = render 'groups'
+  = render 'shared/groups/groups_tree', groups_endpoint: dashboard_groups_path(format: :json), groups_path: dashboard_groups_path
diff --git a/app/views/groups/subgroups.html.haml b/app/views/groups/subgroups.html.haml
index 8f0724c0677..f05cb2a3e73 100644
--- a/app/views/groups/subgroups.html.haml
+++ b/app/views/groups/subgroups.html.haml
@@ -7,15 +7,15 @@
   .top-area
     = render 'groups/show_nav'
     .nav-controls
-      = form_tag request.path, method: :get do |f|
-        = search_field_tag :filter_groups, params[:filter_groups], placeholder: 'Filter by name', class: 'form-control', spellcheck: false
+      = render 'shared/groups/search_form'
+      = render 'shared/groups/dropdown'
       - if can?(current_user, :create_subgroup, @group)
         = link_to new_group_path(parent_id: @group.id), class: 'btn btn-new pull-right' do
           New Subgroup
 
   - if @nested_groups.present?
     %ul.content-list
-      = render partial: 'shared/groups/group', collection: @nested_groups, locals: { full_name: false }
+      = render 'shared/groups/groups_tree', groups_endpoint: subgroups_group_path(@group, format: :json), groups_path: subgroups_group_path(@group)
   - else
     .nothing-here-block
       There are no subgroups to show.
diff --git a/app/views/projects/forks/index.html.haml b/app/views/projects/forks/index.html.haml
index 111cbcda266..093b47f0c38 100644
--- a/app/views/projects/forks/index.html.haml
+++ b/app/views/projects/forks/index.html.haml
@@ -8,7 +8,7 @@
       = search_field_tag :filter_projects, nil, placeholder: 'Search forks', class: 'projects-list-filter project-filter-form-field form-control input-short',
         spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }
 
-    .dropdown
+    .dropdown.js-project-filter-dropdown-wrap
       %button.dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
         %span.light sort:
         - if @sort.present?
diff --git a/app/views/dashboard/groups/_empty_state.html.haml b/app/views/shared/groups/_empty_state.html.haml
index f5222fe631e..0b1525c5ba3 100644
--- a/app/views/dashboard/groups/_empty_state.html.haml
+++ b/app/views/shared/groups/_empty_state.html.haml
@@ -1,5 +1,5 @@
 .groups-empty-state
-  = custom_icon("icon_empty_groups")
+  = custom_icon('icon_empty_groups')
 
   .text-content
     %h4 A group is a collection of several projects.
diff --git a/app/views/shared/groups/_groups_tree.html.haml b/app/views/shared/groups/_groups_tree.html.haml
new file mode 100644
index 00000000000..a2c73ccad36
--- /dev/null
+++ b/app/views/shared/groups/_groups_tree.html.haml
@@ -0,0 +1,12 @@
+= webpack_bundle_tag 'common_vue'
+= webpack_bundle_tag 'groups'
+
+.groups-list-holder
+  #dashboard-group-app{ data: { endpoint: groups_endpoint, path: groups_path } }
+    .groups-list-loading
+      = icon('spinner spin', 'v-show' => 'isLoading')
+    %template{ 'v-if' => 'isGroupsListEmpty' }
+      %div{ 'v-cloak' => true }
+        = render 'shared/groups/empty_state'
+    %template{ 'v-else-if' => 'isGroupsListLoaded' }
+      %groups-component{ ':groups' => 'state.groups', ':page-info' => 'state.pageInfo' }