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

3 files changed, 28 insertions, 21 deletions

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/shared/notifications/_new_button.html.haml b/app/views/shared/notifications/_new_button.html.haml
new file mode 100644
index 00000000000..6d26dbebbc8
--- /dev/null
+++ b/app/views/shared/notifications/_new_button.html.haml
@@ -0,0 +1,27 @@
+- btn_class = local_assigns.fetch(:btn_class, nil)
+
+- if notification_setting
+  .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
+      = f.hidden_field :level, class: "notification_setting_level"
+      .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", 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", 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")
+
+          = render "shared/notifications/notification_dropdown", notification_setting: notification_setting
+
+          = content_for :scripts_body do
+            = render "shared/notifications/custom_notifications", notification_setting: notification_setting