Refresh group overview to match project overview

- Avatar, group name, and group description now left-aligned
- Notification setting and "New project" CTA right-aligned
  with group avatar and name
- Leave group / request access now a link next to the 'Group'
  label below the group name
- Notification setting label removed in favor of icons
  - Tooltip added to indicate notification setting
- Search option moved inside table header next to "Sort by"

1 files changed, 35 insertions, 60 deletions

diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index cc294f6a931..77fe88dacb7 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -1,66 +1,41 @@
 - @no_container = true
 - breadcrumb_title _("Details")
-- can_create_subgroups = can?(current_user, :create_subgroup, @group)
+- @content_class = "limit-container-width" unless fluid_layout
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, group_url(@group, rss_url_options), title: "#{@group.name} activity")
 
-= render 'groups/home_panel'
-
-.groups-listing{ class: container_class, data: { endpoints: { default: group_children_path(@group, format: :json), shared: group_shared_projects_path(@group, format: :json) } } }
-  .top-area.group-nav-container
-    .group-search
-      = render "shared/groups/search_form"
-      - if can? current_user, :create_projects, @group
-        - new_project_label = _("New project")
-        - new_subgroup_label = _("New subgroup")
-        - if can_create_subgroups
-          .btn-group.new-project-subgroup.droplab-dropdown.js-new-project-subgroup.qa-new-project-or-subgroup-dropdown{ 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.qa-new-in-group-button{ type: "button", value: new_project_label, data: { action: "new-project" } }
-            %button.btn.btn-success.dropdown-toggle.js-dropdown-toggle.qa-new-project-or-subgroup-dropdown-toggle{ type: "button", data: { "dropdown-trigger" => "#new-project-or-subgroup-dropdown", 'display' => 'static' } }
-              = icon("caret-down", class: "dropdown-btn-icon")
-            %ul#new-project-or-subgroup-dropdown.dropdown-menu.dropdown-menu-right{ data: { dropdown: true } }
-              %li.droplab-item-selected.qa-new-project-option{ 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 a project in this group.")
-              %li.divider.droplap-item-ignore
-              %li.qa-new-subgroup-option{ 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 in this group.")
-        - else
-          = link_to new_project_label, new_project_path(namespace_id: @group.id), class: "btn btn-success"
-
-    .scrolling-tabs-container.inner-page-scroll-tabs
-      .fade-left= icon('angle-left')
-      .fade-right= icon('angle-right')
-      %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs
-        %li.js-subgroups_and_projects-tab
-          = link_to group_path, data: { target: 'div#subgroups_and_projects', action: 'subgroups_and_projects', toggle: 'tab'} do
-            = _("Subgroups and projects")
-        %li.js-shared-tab
-          = link_to group_shared_path, data: { target: 'div#shared', action: 'shared', toggle: 'tab'} do
-            = _("Shared projects")
-        %li.js-archived-tab
-          = link_to group_archived_path, data: { target: 'div#archived', action: 'archived', toggle: 'tab'} do
-            = _("Archived projects")
-
-    .nav-controls
-      = render "shared/groups/dropdown", options_hash: subgroups_sort_options_hash
-
-  .tab-content
-    #subgroups_and_projects.tab-pane
-      = render "subgroups_and_projects", group: @group
-
-    #shared.tab-pane
-      = render "shared_projects", group: @group
-
-    #archived.tab-pane
-      = render "archived_projects", group: @group
+%div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
+  = render 'groups/home_panel'
+
+  .groups-listing{ data: { endpoints: { default: group_children_path(@group, format: :json), shared: group_shared_projects_path(@group, format: :json) } } }
+    .top-area.group-nav-container
+      .scrolling-tabs-container.inner-page-scroll-tabs
+        .fade-left= icon('angle-left')
+        .fade-right= icon('angle-right')
+        %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs
+          %li.js-subgroups_and_projects-tab
+            = link_to group_path, data: { target: 'div#subgroups_and_projects', action: 'subgroups_and_projects', toggle: 'tab'} do
+              = _("Subgroups and projects")
+          %li.js-shared-tab
+            = link_to group_shared_path, data: { target: 'div#shared', action: 'shared', toggle: 'tab'} do
+              = _("Shared projects")
+          %li.js-archived-tab
+            = link_to group_archived_path, data: { target: 'div#archived', action: 'archived', toggle: 'tab'} do
+              = _("Archived projects")
+
+      .nav-controls.d-block.d-md-flex
+        .group-search
+          = render "shared/groups/search_form"
+
+        = render "shared/groups/dropdown", options_hash: subgroups_sort_options_hash
+
+    .tab-content
+      #subgroups_and_projects.tab-pane
+        = render "subgroups_and_projects", group: @group
+
+      #shared.tab-pane
+        = render "shared_projects", group: @group
+
+      #archived.tab-pane
+        = render "archived_projects", group: @group