Merge branch '53104-redesign-group-overview-ui-mvc' into 'master'

Resolve "Redesign group overview UI: MVC"

Closes #53104

See merge request gitlab-org/gitlab-ce!23866

6 files changed, 108 insertions, 112 deletions

diff --git a/app/views/groups/_home_panel.html.haml b/app/views/groups/_home_panel.html.haml
index 88e401081f4..3a8d95f44d1 100644
--- a/app/views/groups/_home_panel.html.haml
+++ b/app/views/groups/_home_panel.html.haml
@@ -1,17 +1,58 @@
-.group-home-panel.text-center.border-bottom
-  %div{ class: container_class }
-    .avatar-container.s70.group-avatar
-      = group_icon(@group, class: "avatar s70 avatar-tile")
-    %h1.group-title
-      = @group.name
-      %span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
-        = visibility_level_icon(@group.visibility_level, fw: false)
+- can_create_subgroups = can?(current_user, :create_subgroup, @group)
 
-    - if @group.description.present?
-      .group-home-desc
-        = markdown_field(@group, :description)
+.group-home-panel
+  .row.mb-3
+    .home-panel-title-row.col-md-12.col-lg-6.d-flex
+      .avatar-container.home-panel-avatar.append-right-default.float-none
+        = group_icon(@group, class: 'avatar avatar-tile s64', width: 64, height: 64)
+      .d-flex.flex-column.flex-wrap.align-items-baseline
+        .d-inline-flex.align-items-baseline
+          %h1.home-panel-title.prepend-top-8.append-bottom-5
+            = @group.name
+            %span.visibility-icon.text-secondary.prepend-left-4.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
+              = visibility_level_icon(@group.visibility_level, fw: false, options: {class: 'icon'})
+        .home-panel-metadata.d-flex.align-items-center.text-secondary
+          %span
+            = _("Group")
+          - if current_user
+            %span.access-request-links.prepend-left-8
+              = render 'shared/members/access_request_links', source: @group
 
-    - if current_user
-      .group-buttons.d-none.d-sm-block
-        = render 'shared/members/access_request_buttons', source: @group
-        = render 'shared/notifications/button', notification_setting: @notification_setting
+    .home-panel-buttons.col-md-12.col-lg-6.d-inline-flex.flex-wrap.justify-content-lg-end
+      - if current_user
+        .group-buttons
+          = render 'shared/notifications/new_button', notification_setting: @notification_setting, btn_class: 'btn'
+          - 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.home-panel-action-button.prepend-top-default.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' } }
+                  = sprite_icon("arrow-down", css_class: "icon 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"
+
+  - if @group.description.present?
+    .group-home-desc.mt-1
+      .home-panel-description
+        .home-panel-description-markdown.read-more-container
+          = markdown_field(@group, :description)
+        %button.btn.btn-blank.btn-link.js-read-more-trigger.d-lg-none{ type: "button" }
+          = _("Read more")
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
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 65537cf56de..7694217eb28 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -1,17 +1,17 @@
 - empty_repo = @project.empty_repo?
 - show_auto_devops_callout = show_auto_devops_callout?(@project)
 .project-home-panel{ class: ("empty-project" if empty_repo) }
-  .project-header.row.append-bottom-8
-    .project-title-row.col-md-12.col-lg-6.d-flex
-      .avatar-container.project-avatar.float-none
+  .row.append-bottom-8
+    .home-panel-title-row.col-md-12.col-lg-6.d-flex
+      .avatar-container.home-panel-avatar.append-right-default.float-none
         = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64)
       .d-flex.flex-column.flex-wrap.align-items-baseline
         .d-inline-flex.align-items-baseline
-          %h1.project-title.qa-project-name
+          %h1.home-panel-title.prepend-top-8.append-bottom-5.qa-project-name
             = @project.name
-            %span.project-visibility.prepend-left-8.d-inline-flex.align-items-baseline.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@project) }
+            %span.visibility-icon.text-secondary.prepend-left-4.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@project) }
               = visibility_level_icon(@project.visibility_level, fw: false, options: {class: 'icon'})
-        .project-metadata.d-flex.align-items-center
+        .home-panel-metadata.d-flex.align-items-center.text-secondary
           - if can?(current_user, :read_project, @project)
             %span.text-secondary
               = s_('ProjectPage|Project ID: %{project_id}') % { project_id: @project.id }
@@ -19,7 +19,7 @@
             %span.access-request-links.prepend-left-8
               = render 'shared/members/access_request_links', source: @project
           - if @project.tag_list.present?
-            %span.project-topic-list.d-inline-flex.prepend-left-8.has-tooltip{ data: { container: 'body' }, title: @project.has_extra_topics? ? @project.tag_list.join(', ') : nil }
+            %span.home-panel-topic-list.d-inline-flex.prepend-left-8.has-tooltip{ data: { container: 'body' }, title: @project.has_extra_topics? ? @project.tag_list.join(', ') : nil }
               = sprite_icon('tag', size: 16, css_class: 'icon append-right-4')
               = @project.topics_to_show
               - if @project.has_extra_topics?
@@ -29,7 +29,7 @@
     .project-repo-buttons.col-md-12.col-lg-6.d-inline-flex.flex-wrap.justify-content-lg-end
       - if current_user
         .d-inline-flex
-          = render 'projects/buttons/notifications', notification_setting: @notification_setting, btn_class: 'btn-xs'
+          = render 'shared/notifications/new_button', notification_setting: @notification_setting, btn_class: 'btn-xs'
 
       .count-buttons.d-inline-flex
         = render 'projects/buttons/star'
@@ -44,13 +44,13 @@
 
   - if can?(current_user, :download_code, @project)
     %nav.project-stats
-      .nav-links.quick-links.mt-3
+      .nav-links.quick-links
         = render 'stat_anchor_list', anchors: @project.statistics_anchors(show_auto_devops_callout: show_auto_devops_callout)
 
-  .project-home-desc.mt-1
+  .home-panel-home-desc.mt-1
     - if @project.description.present?
-      .project-description
-        .project-description-markdown.read-more-container
+      .home-panel-description
+        .home-panel-description-markdown.read-more-container
           = markdown_field(@project, :description)
         %button.btn.btn-blank.btn-link.js-read-more-trigger.d-lg-none{ type: "button" }
           = _("Read more")
diff --git a/app/views/shared/members/_access_request_buttons.html.haml b/app/views/shared/members/_access_request_buttons.html.haml
deleted file mode 100644
index ebae58f28ba..00000000000
--- a/app/views/shared/members/_access_request_buttons.html.haml
+++ /dev/null
@@ -1,20 +0,0 @@
-- model_name = source.model_name.to_s.downcase
-
-- if can?(current_user, :"destroy_#{model_name}_member", source.members.find_by(user_id: current_user.id)) # rubocop: disable CodeReuse/ActiveRecord
-  .project-action-button.inline
-    - link_text = source.is_a?(Group) ? _('Leave group') : _('Leave project')
-    = link_to link_text, polymorphic_path([:leave, source, :members]),
-              method: :delete,
-              data: { confirm: leave_confirmation_message(source) },
-              class: 'btn'
-- elsif requester = source.requesters.find_by(user_id: current_user.id) # rubocop: disable CodeReuse/ActiveRecord
-  .project-action-button.inline
-    = link_to _('Withdraw Access Request'), polymorphic_path([:leave, source, :members]),
-              method: :delete,
-              data: { confirm: remove_member_message(requester) },
-              class: 'btn'
-- elsif source.request_access_enabled && can?(current_user, :request_access, source)
-  .project-action-button.inline
-    = link_to _('Request Access'), polymorphic_path([:request_access, source, :members]),
-              method: :post,
-              class: 'btn'
diff --git a/app/views/shared/notifications/_button.html.haml b/app/views/shared/notifications/_button.html.haml
index 30860988bbb..2ece7b7f701 100644
--- a/app/views/shared/notifications/_button.html.haml
+++ b/app/views/shared/notifications/_button.html.haml
@@ -1,7 +1,7 @@
 - btn_class = local_assigns.fetch(:btn_class, nil)
 
 - if notification_setting
-  .js-notification-dropdown.notification-dropdown.project-action-button.dropdown.inline
+  .js-notification-dropdown.notification-dropdown.home-panel-action-button.dropdown.inline
     = form_for notification_setting, remote: true, html: { class: "inline notification-form" } do |f|
       = hidden_setting_source_input(notification_setting)
       = f.hidden_field :level, class: "notification_setting_level"
diff --git a/app/views/projects/buttons/_notifications.html.haml b/app/views/shared/notifications/_new_button.html.haml
index a8b728527c8..6d26dbebbc8 100644
--- a/app/views/projects/buttons/_notifications.html.haml
+++ b/app/views/shared/notifications/_new_button.html.haml
@@ -1,7 +1,7 @@
-- btn_class = local_assigns.fetch(:btn_class, "btn-xs")
+- btn_class = local_assigns.fetch(:btn_class, nil)
 
 - if notification_setting
-  .js-notification-dropdown.notification-dropdown.project-action-button.dropdown.inline
+  .js-notification-dropdown.notification-dropdown.home-panel-action-button.prepend-top-default.append-right-8.dropdown.inline
     = form_for notification_setting, remote: true, html: { class: "inline notification-form no-label" } do |f|
       = hidden_setting_source_input(notification_setting)
       = hidden_field_tag "hide_label", true
@@ -9,14 +9,14 @@
       .js-notification-toggle-btns
         %div{ class: ("btn-group" if notification_setting.custom?) }
           - if notification_setting.custom?
-            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: _("Notification setting - %{notification_title}") % { notification_title: notification_title(notification_setting.level) }, class: "#{btn_class}", "aria-label" => _("Notification setting - %{notification_title}") % { notification_title: notification_title(notification_setting.level) }, data: { container: "body", toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), display: 'static' } }
+            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: _("Notification setting - %{notification_title}") % { notification_title: notification_title(notification_setting.level) }, class: "#{btn_class}", "aria-label" => _("Notification setting - %{notification_title}") % { notification_title: notification_title(notification_setting.level) }, data: { container: "body", placement: 'top', toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), display: 'static' } }
               = sprite_icon("notifications", css_class: "icon notifications-icon js-notifications-icon")
               %span.js-notification-loading.fa.hidden
             %button.btn.dropdown-toggle{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" }, class: "#{btn_class}" }
               = sprite_icon("arrow-down", css_class: "icon mr-0")
               .sr-only Toggle dropdown
           - else
-            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: "Notification setting - #{notification_title(notification_setting.level)}", class: "#{btn_class}", "aria-label" => "Notification setting: #{notification_title(notification_setting.level)}", data: { container: "body", toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
+            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: "Notification setting - #{notification_title(notification_setting.level)}", class: "#{btn_class}", "aria-label" => "Notification setting: #{notification_title(notification_setting.level)}", data: { container: "body", placement: 'top', toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
               = sprite_icon("notifications", css_class: "icon notifications-icon js-notifications-icon")
               %span.js-notification-loading.fa.hidden
               = sprite_icon("arrow-down", css_class: "icon")