Merge branch '31893-notification-buttons' into 'master'

Fix broken formatting of notification buttons

Closes #31893

See merge request gitlab-org/gitlab!16672

app/assets/stylesheets/pages/projects.scss

@@ -252,6 +252,7 @@
 
     .fa-caret-down {
       margin-left: 3px;
+      line-height: 0;
 
       &.dropdown-btn-icon {
         margin-left: 0;
@@ -269,7 +270,7 @@
   }
 
   .count-badge,
-  .btn-xs {
+  .btn {
     height: 24px;
   }
 

app/controllers/notification_settings_controller.rb

@@ -16,12 +16,7 @@ class NotificationSettingsController < ApplicationController
     @notification_setting = current_user.notification_settings.find(params[:id])
     @saved = @notification_setting.update(notification_setting_params_for(@notification_setting.source))
 
-    if params[:hide_label].present?
-      btn_class = params[:project_id].present? ? 'btn-xs' : ''
-      render_response("shared/notifications/_new_button", btn_class)
-    else
-      render_response
-    end
+    render_response
   end
 
   private
@@ -42,7 +37,16 @@ class NotificationSettingsController < ApplicationController
     can?(current_user, ability_name, resource)
   end
 
-  def render_response(response_template = "shared/notifications/_button", btn_class = nil)
+  def render_response
+    btn_class = nil
+
+    if params[:hide_label].present?
+      btn_class = 'btn-xs' if params[:project_id].present?
+      response_template = 'shared/notifications/_new_button'
+    else
+      response_template = 'shared/notifications/_button'
+    end
+
     render json: {
       html: view_to_html_string(response_template, notification_setting: @notification_setting, btn_class: btn_class),
       saved: @saved

app/views/shared/notifications/_button.html.haml

@@ -17,14 +17,14 @@
       .js-notification-toggle-btns
         %div{ class: ("btn-group" if notification_setting.custom?) }
           - if notification_setting.custom?
-            %button.dropdown-new.btn.btn-default.btn-xs.has-tooltip.notifications-btn.text-left#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), display: 'static' } }
+            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn.text-left#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), display: 'static' } }
               = icon("bell", class: "js-notification-loading")
               = notification_title(notification_setting.level)
-            %button.btn.dropdown-toggle{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
+            %button.btn.dropdown-toggle.d-flex{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
               = icon('caret-down')
               .sr-only Toggle dropdown
           - else
-            %button.dropdown-new.btn.btn-default.btn-xs.has-tooltip.notifications-btn#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, 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: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
               .float-left
                 = icon("bell", class: "js-notification-loading")
                 = notification_title(notification_setting.level)

app/views/shared/notifications/_custom_notifications.html.haml

+- hide_label = local_assigns.fetch(:hide_label, false)
+
 .modal.fade{ tabindex: "-1", role: "dialog", id: notifications_menu_identifier("modal", notification_setting), "aria-labelledby": "custom-notifications-title" }
   .modal-dialog
     .modal-content
@@ -11,6 +13,7 @@
         .container-fluid
           = form_for notification_setting, html: { class: "custom-notifications-form" } do |f|
             = hidden_setting_source_input(notification_setting)
+            = hidden_field_tag("hide_label", true) if hide_label
             .row
               .col-lg-4
                 %h4.prepend-top-0= _('Notification events')

app/views/shared/notifications/_new_button.html.haml

@@ -31,4 +31,4 @@
           = render "shared/notifications/notification_dropdown", notification_setting: notification_setting
 
           = content_for :scripts_body do
-            = render "shared/notifications/custom_notifications", notification_setting: notification_setting
+            = render "shared/notifications/custom_notifications", notification_setting: notification_setting, hide_label: true

ee/changelogs/unreleased/31893-notification-buttons.yml

+---
+title: Fix notification button size in notification settings
+merge_request: 16672
+author:
+type: fixed