Groups tree enhancements for Groups Dashboard and Group Homepage

14 files changed, 78 insertions, 59 deletions

diff --git a/app/views/dashboard/_groups_head.html.haml b/app/views/dashboard/_groups_head.html.haml
index 7981daa0705..cebdbab4e74 100644
--- a/app/views/dashboard/_groups_head.html.haml
+++ b/app/views/dashboard/_groups_head.html.haml
@@ -1,13 +1,13 @@
 .top-area
   %ul.nav-links
     = nav_link(page: dashboard_groups_path) do
-      = link_to dashboard_groups_path, title: 'Your groups' do
+      = link_to dashboard_groups_path, title: _("Your groups") do
         Your groups
     = nav_link(page: explore_groups_path) do
-      = link_to explore_groups_path, title: 'Explore public groups' do
+      = link_to explore_groups_path, title: _("Explore public groups") do
         Explore public groups
   .nav-controls
     = render 'shared/groups/search_form'
     = render 'shared/groups/dropdown'
     - if current_user.can_create_group?
-      = link_to "New group", new_group_path, class: "btn btn-new"
+      = link_to _("New group"), new_group_path, class: "btn btn-new"
diff --git a/app/views/dashboard/groups/_empty_state.html.haml b/app/views/dashboard/groups/_empty_state.html.haml
deleted file mode 100644
index f5222fe631e..00000000000
--- a/app/views/dashboard/groups/_empty_state.html.haml
+++ /dev/null
@@ -1,7 +0,0 @@
-.groups-empty-state
-  = custom_icon("icon_empty_groups")
-
-  .text-content
-    %h4 A group is a collection of several projects.
-    %p If you organize your projects under a group, it works like a folder.
-    %p You can manage your group member’s permissions and access to each project in the group.
diff --git a/app/views/dashboard/groups/_groups.html.haml b/app/views/dashboard/groups/_groups.html.haml
index 168e6272d8e..601b6a8b1a7 100644
--- a/app/views/dashboard/groups/_groups.html.haml
+++ b/app/views/dashboard/groups/_groups.html.haml
@@ -1,9 +1,2 @@
 .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' }
+  #js-groups-tree{ data: { hide_projects: 'true', endpoint: dashboard_groups_path(format: :json), path: dashboard_groups_path, 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/dashboard/groups/index.html.haml b/app/views/dashboard/groups/index.html.haml
index 1cea8182733..25bf08c6c12 100644
--- a/app/views/dashboard/groups/index.html.haml
+++ b/app/views/dashboard/groups/index.html.haml
@@ -6,7 +6,7 @@
 = webpack_bundle_tag 'common_vue'
 = webpack_bundle_tag 'groups'
 
-- if @groups.empty?
-  = render 'empty_state'
+- if params[:filter].blank? && @groups.empty?
+  = render 'shared/groups/empty_state'
 - else
   = render 'groups'
diff --git a/app/views/explore/groups/_groups.html.haml b/app/views/explore/groups/_groups.html.haml
index 794c6d1d170..91149498248 100644
--- a/app/views/explore/groups/_groups.html.haml
+++ b/app/views/explore/groups/_groups.html.haml
@@ -1,6 +1,2 @@
 .js-groups-list-holder
-  %ul.content-list
-    - @groups.each do |group|
-      = render 'shared/groups/group', group: group
-
-  = paginate @groups, theme: 'gitlab'
+  #js-groups-tree{ data: { hide_projects: 'true', endpoint: explore_groups_path(format: :json), path: explore_groups_path, 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/explore/groups/index.html.haml b/app/views/explore/groups/index.html.haml
index 2651ef37e67..86abdf547cc 100644
--- a/app/views/explore/groups/index.html.haml
+++ b/app/views/explore/groups/index.html.haml
@@ -2,6 +2,9 @@
 - page_title    "Groups"
 - header_title  "Groups", dashboard_groups_path
 
+= webpack_bundle_tag 'common_vue'
+= webpack_bundle_tag 'groups'
+
 - if current_user
   = render 'dashboard/groups_head'
 - else
@@ -17,7 +20,7 @@
       %p Below you will find all the groups that are public.
       %p You can easily contribute to them by requesting to join these groups.
 
-- if @groups.present?
-  = render 'groups'
-- else
+- if params[:filter].blank? && @groups.empty?
   .nothing-here-block No public groups
+- else
+  = render 'groups'
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
diff --git a/app/views/shared/groups/_dropdown.html.haml b/app/views/shared/groups/_dropdown.html.haml
index 760370a6984..355b03e4d9e 100644
--- a/app/views/shared/groups/_dropdown.html.haml
+++ b/app/views/shared/groups/_dropdown.html.haml
@@ -1,18 +1,21 @@
-.dropdown.inline.js-group-filter-dropdown-wrap
+- if @sort.present?
+  - default_sort_by = @sort
+- else
+  - if params[:sort]
+    - default_sort_by = params[:sort]
+  - else
+    - default_sort_by = sort_value_recently_created
+
+
+.dropdown.inline.js-group-filter-dropdown-wrap.append-right-10
   %button.dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
     %span.dropdown-label
-      - if @sort.present?
-        = sort_options_hash[@sort]
-      - else
-        = sort_title_recently_created
+      = sort_options_hash[default_sort_by]
     = icon('chevron-down')
-  %ul.dropdown-menu.dropdown-menu-align-right
-    %li
-      = link_to filter_groups_path(sort: sort_value_recently_created) do
-        = sort_title_recently_created
-      = link_to filter_groups_path(sort: sort_value_oldest_created) do
-        = sort_title_oldest_created
-      = link_to filter_groups_path(sort: sort_value_recently_updated) do
-        = sort_title_recently_updated
-      = link_to filter_groups_path(sort: sort_value_oldest_updated) do
-        = sort_title_oldest_updated
+  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+    %li.dropdown-header
+      = _("Sort by")
+    - groups_sort_options_hash.each do |value, title|
+      %li
+        = link_to filter_groups_path(sort: value), class: "#{ 'is-active' if default_sort_by == value }" do
+          = title
diff --git a/app/views/shared/groups/_empty_state.html.haml b/app/views/shared/groups/_empty_state.html.haml
new file mode 100644
index 00000000000..13bb4baee3f
--- /dev/null
+++ b/app/views/shared/groups/_empty_state.html.haml
@@ -0,0 +1,7 @@
+.groups-empty-state
+  = custom_icon("icon_empty_groups")
+
+  .text-content
+    %h4= s_("GroupsEmptyState|A group is a collection of several projects.")
+    %p= s_("GroupsEmptyState|If you organize your projects under a group, it works like a folder.")
+    %p= s_("GroupsEmptyState|You can manage your group member’s permissions and access to each project in the group.")
diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml
index b361ec86ced..eb41daa0988 100644
--- a/app/views/shared/groups/_group.html.haml
+++ b/app/views/shared/groups/_group.html.haml
@@ -11,7 +11,7 @@
         = link_to edit_group_path(group), class: "btn" do
           = icon('cogs')
 
-      = link_to leave_group_group_members_path(group), data: { confirm: leave_confirmation_message(group) }, method: :delete, class: "btn", title: 'Leave this group' do
+      = link_to leave_group_group_members_path(group), data: { confirm: leave_confirmation_message(group) }, method: :delete, class: "btn", title: s_("GroupsTree|Leave this group") do
         = icon('sign-out')
 
   .stats
diff --git a/app/views/shared/groups/_list.html.haml b/app/views/shared/groups/_list.html.haml
index 427595c47a5..aec8ecd1714 100644
--- a/app/views/shared/groups/_list.html.haml
+++ b/app/views/shared/groups/_list.html.haml
@@ -3,4 +3,4 @@
     - groups.each_with_index do |group, i|
       = render "shared/groups/group", group: group
 - else
-  .nothing-here-block No groups found
+  .nothing-here-block= s_("GroupsEmptyState|No groups found")
diff --git a/app/views/shared/groups/_search_form.html.haml b/app/views/shared/groups/_search_form.html.haml
index ad7a7faedf1..3f91263089a 100644
--- a/app/views/shared/groups/_search_form.html.haml
+++ b/app/views/shared/groups/_search_form.html.haml
@@ -1,2 +1,2 @@
-= form_tag request.path, method: :get, class: 'group-filter-form', id: 'group-filter-form' do |f|
-  = search_field_tag :filter_groups, params[:filter_groups], placeholder: 'Filter by name...', class: 'group-filter-form-field form-control input-short js-groups-list-filter', spellcheck: false, id: 'group-filter-form-field', tabindex: "2"
+= form_tag request.path, method: :get, class: 'group-filter-form append-right-10', id: 'group-filter-form' do |f|
+  = search_field_tag :filter, params[:filter], placeholder: s_('GroupsTree|Filter by name...'), class: 'group-filter-form-field form-control input-short js-groups-list-filter', spellcheck: false, id: 'group-filter-form-field', tabindex: "2"
diff --git a/app/views/shared/projects/_dropdown.html.haml b/app/views/shared/projects/_dropdown.html.haml
index 80432a73e4e..3d917346f6b 100644
--- a/app/views/shared/projects/_dropdown.html.haml
+++ b/app/views/shared/projects/_dropdown.html.haml
@@ -1,5 +1,5 @@
 - @sort ||= sort_value_latest_activity
-.dropdown
+.dropdown.js-project-filter-dropdown-wrap
   - toggle_text = projects_sort_options_hash[@sort]
   = dropdown_toggle(toggle_text, { toggle: 'dropdown' }, { id: 'sort-projects-dropdown' })
   %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable