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

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
15002205 · Kushal Pandya · 4c6ad05c · ded6c663 · 15002205 · 15002205
Commit 15002205 authored Jan 30, 2019 by Kushal Pandya
16 changed files
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -278,8 +278,8 @@ $performance-bar-height: 35px;
 $flash-height: 52px;
 $context-header-height: 60px;
 $breadcrumb-min-height: 48px;
-$project-title-row-height: 64px;
+$home-panel-title-row-height: 64px;
-$project-avatar-mobile-size: 24px;
+$home-panel-avatar-mobile-size: 24px;
 $gl-line-height: 16px;
 $gl-line-height-24: 24px;
 $gl-line-height-14: 14px;

--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -29,9 +29,7 @@
  }
 }
-.group-nav-container .group-search,
 .group-nav-container .nav-controls {
-  display: flex;
  align-items: flex-start;
  padding: $gl-padding-top 0 0;
@@ -44,6 +42,52 @@
    margin-top: 0;
  }
+  @include media-breakpoint-down(sm) {
+    .dropdown,
+    .dropdown .dropdown-toggle,
+    .btn-success {
+      display: block;
+    }
+    .group-filter-form,
+    .dropdown {
+      margin-bottom: 10px;
+      margin-right: 0;
+    }
+    &,
+    .group-filter-form,
+    .group-filter-form-field,
+    .dropdown,
+    .dropdown .dropdown-toggle,
+    .btn-success {
+      width: 100%;
+    }
+    .dropdown .dropdown-toggle .fa-chevron-down {
+      position: absolute;
+      top: 11px;
+      right: 8px;
+    }
+  }
+}
+.home-panel-buttons {
+  .home-panel-action-button {
+    vertical-align: top;
+  }
+  .notification-dropdown {
+    .dropdown-menu {
+      @extend .dropdown-menu-right;
+    }
+    .icon {
+      fill: $gl-text-color-secondary;
+    }
+  }
  .new-project-subgroup {
    .dropdown-primary {
      min-width: 115px;
@@ -99,36 +143,8 @@
          font-weight: $gl-font-weight-bold;
        }
      }
-    }
-  }
      @include media-breakpoint-down(sm) {
-    &,
-    .dropdown,
-    .dropdown .dropdown-toggle,
-    .btn-success {
-      display: block;
-    }
-    .group-filter-form,
-    .dropdown {
-      margin-bottom: 10px;
-      margin-right: 0;
-    }
-    .group-filter-form,
-    .dropdown .dropdown-toggle,
-    .btn-success {
-      width: 100%;
-    }
-    .dropdown .dropdown-toggle .fa-chevron-down {
-      position: absolute;
-      top: 11px;
-      right: 8px;
-    }
-    .new-project-subgroup {
        display: flex;
        align-items: flex-start;
@@ -147,11 +163,7 @@
        }
      }
    }
-}
+  }
-.group-nav-container .group-search {
-  padding: $gl-padding 0;
-  border-bottom: 1px solid $border-color;
 }
 .groups-listing {

--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -140,73 +140,19 @@
  }
 }
-.project-home-panel,
+.group-home-panel,
-.group-home-panel {
-  padding-top: 24px;
-  padding-bottom: 24px;
-  .group-avatar {
-    float: none;
-    margin: 0 auto;
-    &.identicon {
-      border-radius: 50%;
-    }
-  }
-  .group-title {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    font-size: 24px;
-    font-weight: $gl-font-weight-normal;
-    line-height: 1;
-    word-wrap: break-word;
-    .fa {
-      margin-left: 2px;
-      font-size: 12px;
-      vertical-align: middle;
-    }
-  }
-  .group-home-desc {
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 0;
-    max-width: 700px;
-    > p {
-      margin-bottom: 0;
-    }
-  }
-  .notifications-btn {
-    .fa-bell,
-    .fa-spinner {
-      margin-right: 6px;
-    }
-    .fa-angle-down {
-      margin-left: 6px;
-    }
-  }
-}
 .project-home-panel {
  padding-top: $gl-padding;
  padding-bottom: $gl-padding;
-  .project-avatar {
+  .home-panel-avatar {
-    width: $project-title-row-height;
+    width: $home-panel-title-row-height;
-    height: $project-title-row-height;
+    height: $home-panel-title-row-height;
    flex-shrink: 0;
-    flex-basis: $project-title-row-height;
+    flex-basis: $home-panel-title-row-height;
-    margin: 0 $gl-padding 0 0;
  }
-  .project-title {
+  .home-panel-title {
-    margin-top: 8px;
-    margin-bottom: 5px;
    font-size: 20px;
    line-height: $gl-line-height-24;
    font-weight: bold;
@@ -215,11 +161,7 @@
      font-size: $gl-font-size-large;
    }
-    .project-visibility {
+    .home-panel-topic-list {
-      color: $gl-text-color-secondary;
-    }
-    .project-topic-list {
      font-size: $gl-font-size;
      font-weight: $gl-font-weight-normal;
@@ -231,12 +173,12 @@
    }
  }
-  .project-title-row {
+  .home-panel-title-row {
    @include media-breakpoint-down(sm) {
-      .project-avatar {
+      .home-panel-avatar {
-        width: $project-avatar-mobile-size;
+        width: $home-panel-avatar-mobile-size;
-        height: $project-avatar-mobile-size;
+        height: $home-panel-avatar-mobile-size;
-        flex-basis: $project-avatar-mobile-size;
+        flex-basis: $home-panel-avatar-mobile-size;
        .avatar {
          font-size: 20px;
@@ -244,28 +186,26 @@
        }
      }
-      .project-title {
+      .home-panel-title {
        margin-top: 4px;
        margin-bottom: 2px;
        font-size: $gl-font-size;
        line-height: $gl-font-size-large;
      }
-      .project-topic-list,
+      .home-panel-topic-list,
-      .project-metadata {
+      .home-panel-metadata {
        font-size: $gl-font-size-small;
      }
    }
  }
-  .project-metadata {
+  .home-panel-metadata {
    font-weight: normal;
    font-size: 14px;
    line-height: $gl-btn-line-height;
-    color: $gl-text-color-secondary;
-    .project-license {
+    .home-panel-license {
      .btn {
        line-height: 0;
        border-width: 0;
@@ -273,13 +213,13 @@
    }
    .access-request-link,
-    .project-topic-list {
+    .home-panel-topic-list {
      padding-left: $gl-padding-8;
      border-left: 1px solid $gl-text-color-secondary;
    }
  }
-  .project-description {
+  .home-panel-description {
    @include media-breakpoint-up(md) {
      font-size: $gl-font-size-large;
    }
@@ -292,12 +232,11 @@
  }
 }
-.nav > .project-repo-buttons {
+.nav > .project-buttons {
  margin-top: 0;
 }
-.project-repo-buttons,
+.project-repo-buttons {
-.group-buttons {
  .btn {
    &:last-child {
      margin-left: 0;
@@ -318,8 +257,30 @@
        margin-left: 0;
      }
    }
+    .notifications-icon {
+      top: 1px;
+      margin-right: 0;
+    }
  }
+  .icon {
+    top: 0;
+  }
+  .count-badge,
+  .btn-xs {
+    height: 24px;
+  }
+  .dropdown-toggle,
+  .clone-dropdown-btn {
+    .fa {
+      color: unset;
+    }
+  }
+  .home-panel-action-button,
  .project-action-button {
    margin: $gl-padding $gl-padding-8 0 0;
    vertical-align: top;
@@ -385,31 +346,6 @@
  }
 }
-.project-repo-buttons {
-  .icon {
-    top: 0;
-  }
-  .count-badge,
-  .btn-xs {
-    height: 24px;
-  }
-  .dropdown-toggle,
-  .clone-dropdown-btn {
-    .fa {
-      color: unset;
-    }
-  }
-  .btn {
-    .notifications-icon {
-      top: 1px;
-      margin-right: 0;
-    }
-  }
-}
 .split-one {
  display: inline-table;
  margin-right: 12px;
@@ -772,9 +708,6 @@
 .project-stats,
 .project-buttons {
-  font-size: 0;
-  text-align: center;
  .scrolling-tabs-container {
    .scrolling-tabs {
      margin-top: $gl-padding-8;

--- a/app/controllers/notification_settings_controller.rb
+++ b/app/controllers/notification_settings_controller.rb
@@ -17,7 +17,8 @@ class NotificationSettingsController < ApplicationController
    @saved = @notification_setting.update(notification_setting_params_for(@notification_setting.source))
    if params[:hide_label].present?
-      render_response("projects/buttons/_notifications")
+      btn_class = params[:project_id].present? ? 'btn-xs' : ''
+      render_response("shared/notifications/_new_button", btn_class)
    else
      render_response
    end
@@ -41,9 +42,9 @@ class NotificationSettingsController < ApplicationController
    can?(current_user, ability_name, resource)
  end
-  def render_response(response_template = "shared/notifications/_button")
+  def render_response(response_template = "shared/notifications/_button", btn_class = nil)
    render json: {
-      html: view_to_html_string(response_template, notification_setting: @notification_setting),
+      html: view_to_html_string(response_template, notification_setting: @notification_setting, btn_class: btn_class),
      saved: @saved
    }
  end

--- a/app/views/groups/_home_panel.html.haml
+++ b/app/views/groups/_home_panel.html.haml
-.group-home-panel.text-center.border-bottom
+- can_create_subgroups = can?(current_user, :create_subgroup, @group)
-  %div{ class: container_class }
-    .avatar-container.s70.group-avatar
+.group-home-panel
-      = group_icon(@group, class: "avatar s70 avatar-tile")
+  .row.mb-3
-    %h1.group-title
+    .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.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
+            %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)
+              = 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
+    .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
+    .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" }
-    - if current_user
+          = _("Read more")
-      .group-buttons.d-none.d-sm-block
-        = render 'shared/members/access_request_buttons', source: @group
-        = render 'shared/notifications/button', notification_setting: @notification_setting
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
 - @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'
+%div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
+  = 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) } } }
+  .groups-listing{ 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')
@@ -52,7 +24,10 @@
            = link_to group_archived_path, data: { target: 'div#archived', action: 'archived', toggle: 'tab'} do
              = _("Archived projects")
-    .nav-controls
+      .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

--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
 - 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
+  .row.append-bottom-8
-    .project-title-row.col-md-12.col-lg-6.d-flex
+    .home-panel-title-row.col-md-12.col-lg-6.d-flex
-      .avatar-container.project-avatar.float-none
+      .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
+      .home-panel-description
-        .project-description-markdown.read-more-container
+        .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")

--- a/app/views/shared/members/_access_request_buttons.html.haml
+++ b/app/views/shared/members/_access_request_buttons.html.haml
- 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'
--- a/app/views/shared/notifications/_button.html.haml
+++ b/app/views/shared/notifications/_button.html.haml
 - 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"

--- a/app/views/projects/buttons/_notifications.html.haml
+++ b/app/views/projects/buttons/_notifications.html.haml
- 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")

--- a/changelogs/unreleased/53104-redesign-group-overview-ui-mvc.yml
+++ b/changelogs/unreleased/53104-redesign-group-overview-ui-mvc.yml
+---
+title: Refresh group overview to match project overview
+merge_request: 23866
+author:
+type: changed
--- a/qa/qa/page/group/show.rb
+++ b/qa/qa/page/group/show.rb
@@ -6,7 +6,7 @@ module QA
      class Show < Page::Base
        include Page::Component::GroupsFilter
-        view 'app/views/groups/show.html.haml' do
+        view 'app/views/groups/_home_panel.html.haml' do
          element :new_project_or_subgroup_dropdown
          element :new_project_or_subgroup_dropdown_toggle
          element :new_project_option

--- a/spec/features/groups/group_settings_spec.rb
+++ b/spec/features/groups/group_settings_spec.rb
@@ -18,14 +18,14 @@ describe 'Edit group settings' do
      update_path(new_group_path)
      visit new_group_full_path
      expect(current_path).to eq(new_group_full_path)
-      expect(find('h1.group-title')).to have_content(group.name)
+      expect(find('h1.home-panel-title')).to have_content(group.name)
    end
    it 'the old group path redirects to the new path' do
      update_path(new_group_path)
      visit old_group_full_path
      expect(current_path).to eq(new_group_full_path)
-      expect(find('h1.group-title')).to have_content(group.name)
+      expect(find('h1.home-panel-title')).to have_content(group.name)
    end
    context 'with a subgroup' do
@@ -37,14 +37,14 @@ describe 'Edit group settings' do
        update_path(new_group_path)
        visit new_subgroup_full_path
        expect(current_path).to eq(new_subgroup_full_path)
-        expect(find('h1.group-title')).to have_content(subgroup.name)
+        expect(find('h1.home-panel-title')).to have_content(subgroup.name)
      end
      it 'the old subgroup path redirects to the new path' do
        update_path(new_group_path)
        visit old_subgroup_full_path
        expect(current_path).to eq(new_subgroup_full_path)
-        expect(find('h1.group-title')).to have_content(subgroup.name)
+        expect(find('h1.home-panel-title')).to have_content(subgroup.name)
      end
    end

--- a/spec/features/groups_spec.rb
+++ b/spec/features/groups_spec.rb
@@ -203,7 +203,7 @@ describe 'Group' do
      visit path
-      expect(page).to have_css('.group-home-desc > p > strong')
+      expect(page).to have_css('.home-panel-description-markdown > p > strong')
    end
    it 'passes through html-pipeline' do
@@ -211,7 +211,7 @@ describe 'Group' do
      visit path
-      expect(page).to have_css('.group-home-desc > p > gl-emoji')
+      expect(page).to have_css('.home-panel-description-markdown > p > gl-emoji')
    end
    it 'sanitizes unwanted tags' do
@@ -219,7 +219,7 @@ describe 'Group' do
      visit path
-      expect(page).not_to have_css('.group-home-desc h1')
+      expect(page).not_to have_css('.home-panel-description-markdown h1')
    end
    it 'permits `rel` attribute on links' do
@@ -227,7 +227,7 @@ describe 'Group' do
      visit path
-      expect(page).to have_css('.group-home-desc a[rel]')
+      expect(page).to have_css('.home-panel-description-markdown a[rel]')
    end
  end

--- a/spec/features/projects_spec.rb
+++ b/spec/features/projects_spec.rb
@@ -55,30 +55,30 @@ describe 'Project' do
    it 'parses Markdown' do
      project.update_attribute(:description, 'This is **my** project')
      visit path
-      expect(page).to have_css('.project-description > .project-description-markdown > p > strong')
+      expect(page).to have_css('.home-panel-description > .home-panel-description-markdown > p > strong')
    end
    it 'passes through html-pipeline' do
      project.update_attribute(:description, 'This project is the :poop:')
      visit path
-      expect(page).to have_css('.project-description > .project-description-markdown > p > gl-emoji')
+      expect(page).to have_css('.home-panel-description > .home-panel-description-markdown > p > gl-emoji')
    end
    it 'sanitizes unwanted tags' do
      project.update_attribute(:description, "```\ncode\n```")
      visit path
-      expect(page).not_to have_css('.project-description code')
+      expect(page).not_to have_css('.home-panel-description code')
    end
    it 'permits `rel` attribute on links' do
      project.update_attribute(:description, 'https://google.com/')
      visit path
-      expect(page).to have_css('.project-description a[rel]')
+      expect(page).to have_css('.home-panel-description a[rel]')
    end
    context 'read more', :js do
      let(:read_more_selector)         { '.read-more-container' }
-      let(:read_more_trigger_selector) { '.project-home-desc .js-read-more-trigger' }
+      let(:read_more_trigger_selector) { '.home-panel-home-desc .js-read-more-trigger' }
      it 'does not display "read more" link on desktop breakpoint' do
        project.update_attribute(:description, 'This is **my** project')
@@ -94,7 +94,7 @@ describe 'Project' do
        find(read_more_trigger_selector).click
-        expect(page).to have_css('.project-description .is-expanded')
+        expect(page).to have_css('.home-panel-description .is-expanded')
      end
    end
  end
@@ -111,14 +111,14 @@ describe 'Project' do
    it 'shows project topics' do
      project.update_attribute(:tag_list, 'topic1')
      visit path
-      expect(page).to have_css('.project-topic-list')
+      expect(page).to have_css('.home-panel-topic-list')
      expect(page).to have_content('topic1')
    end
    it 'shows up to 3 project tags' do
      project.update_attribute(:tag_list, 'topic1, topic2, topic3, topic4')
      visit path
-      expect(page).to have_css('.project-topic-list')
+      expect(page).to have_css('.home-panel-topic-list')
      expect(page).to have_content('topic1, topic2, topic3 + 1 more')
    end
  end

--- a/spec/views/projects/_home_panel.html.haml_spec.rb
+++ b/spec/views/projects/_home_panel.html.haml_spec.rb
@@ -23,7 +23,7 @@ describe 'projects/_home_panel' do
      it 'makes it possible to set notification level' do
        render
-        expect(view).to render_template('projects/buttons/_notifications')
+        expect(view).to render_template('shared/notifications/_new_button')
        expect(rendered).to have_selector('.notification-dropdown')
      end
    end