Groups tree enhancements for Groups Dashboard and Group Homepage

2 files changed, 35 insertions, 11 deletions

diff --git a/app/views/groups/_children.html.haml b/app/views/groups/_children.html.haml
index e22d9cc6013..3afb6b2f849 100644
--- a/app/views/groups/_children.html.haml
+++ b/app/views/groups/_children.html.haml
@@ -1,4 +1,5 @@
-- if children.any?
-  render children here
-- else
-  .nothing-here-block No children found
+= webpack_bundle_tag 'common_vue'
+= webpack_bundle_tag 'groups'
+
+.js-groups-list-holder
+  #js-groups-tree{ data: { hide_projects: 'false', group_id: group.id, endpoint: group_children_path(group, format: :json), path: group_path(group), form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index a8842596dbd..c6e5e16e239 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -7,12 +7,35 @@
 = render 'groups/home_panel'
 
 .groups-header{ class: container_class }
-  .top-area
-    .nav-controls
-      = render 'shared/projects/search_form'
-      = render 'shared/projects/dropdown'
+  .group-nav-container
+    .nav-controls.clearfix
+      = render "shared/groups/search_form"
+      = render "shared/groups/dropdown"
       - if can? current_user, :create_projects, @group
-        = link_to new_project_path(namespace_id: @group.id), class: 'btn btn-new pull-right' do
-          New Project
+        - new_project_label = _("New project")
+        - new_subgroup_label = _("New subgroup")
+        .btn-group.new-project-subgroup.droplab-dropdown.js-new-project-subgroup{ data: { project_path: new_project_path(namespace_id: @group.id), subgroup_path: new_group_path(parent_id: @group.id) } }
+          %input.btn.btn-success.dropdown-primary.js-new-group-child{ type: "button", value: new_project_label, data: { action: "new-project" } }
+          %button.btn.btn-success.dropdown-toggle.js-dropdown-toggle{ type: "button", data: { "dropdown-trigger" => "#new-project-or-subgroup-dropdown" } }
+            = icon("caret-down", class: "dropdown-btn-icon")
+          %ul#new-project-or-subgroup-dropdown.dropdown-menu.dropdown-menu-align-right{ data: { dropdown: true } }
+            %li.droplab-item-selected{ role: "button", data: { value: "new-project", text: new_project_label } }
+              .menu-item
+                .icon-container
+                  = icon("check", class: "list-item-checkmark")
+                .description
+                  %strong= new_project_label
+                  %span= s_("GroupsTree|Create project under this group.")
+            %li.divider.droplap-item-ignore
+            %li{ role: "button", data: { value: "new-subgroup", text: new_subgroup_label } }
+              .menu-item
+                .icon-container
+                  = icon("check", class: "list-item-checkmark")
+                .description
+                  %strong= new_subgroup_label
+                  %span= s_("GroupsTree|Create a subgroup under this group.")
 
-  = render "children", children: @children
+  - if params[:filter].blank? && @children.empty?
+    = render "shared/groups/empty_state"
+  - else
+    = render "children", children: @children, group: @group