Merge branch 'issue_12758' into 'master'

Implement custom notification level options

![Screen_Shot_2016-06-17_at_15.31.43](/uploads/3fc47d2f461b3e8b67bb8acaa304cf99/Screen_Shot_2016-06-17_at_15.31.43.png)

![Screenshot_from_2016-06-15_10-52-27](/uploads/88dbdd21d97e80ee772fe08fa0c9b393/Screenshot_from_2016-06-15_10-52-27.png)

part of #12758 

See merge request !4389

8 files changed, 84 insertions, 25 deletions

diff --git a/app/views/profiles/notifications/_group_settings.html.haml b/app/views/profiles/notifications/_group_settings.html.haml
index f0cf82afe83..537bba21f4a 100644
--- a/app/views/profiles/notifications/_group_settings.html.haml
+++ b/app/views/profiles/notifications/_group_settings.html.haml
@@ -9,5 +9,4 @@
     = link_to group.name, group_path(group)
 
   .pull-right
-    = form_for [group, setting], remote: true, html: { class: 'update-notifications' } do |f|
-      = f.select :level, NotificationSetting.levels.keys, {}, class: 'form-control trigger-submit'
+    = render 'shared/notifications/button', notification_setting: setting
diff --git a/app/views/profiles/notifications/_project_settings.html.haml b/app/views/profiles/notifications/_project_settings.html.haml
index e0fad555c09..5b2a69b8891 100644
--- a/app/views/profiles/notifications/_project_settings.html.haml
+++ b/app/views/profiles/notifications/_project_settings.html.haml
@@ -9,5 +9,4 @@
     = link_to_project(project)
 
   .pull-right
-    = form_for [project.namespace.becomes(Namespace), project, setting], remote: true, html: { class: 'update-notifications' } do |f|
-      = f.select :level, NotificationSetting.levels.keys, {}, class: 'form-control trigger-submit'
+    = render 'shared/notifications/button', notification_setting: setting
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index f2659ac14b5..5afd83a522e 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -24,12 +24,15 @@
         .form-group
           = f.label :notification_email, class: "label-light"
           = f.select :notification_email, @user.all_emails, { include_blank: false }, class: "select2"
-        .form-group
-          = f.label :notification_level, class: 'label-light'
-          = notification_level_radio_buttons
 
-        .prepend-top-default
-          = f.submit 'Update settings', class: "btn btn-create"
+      = label_tag :global_notification_level, "Global notification level", class: "label-light"
+      %br
+      .clearfix
+      .form-group.pull-left
+        = render 'shared/notifications/button', notification_setting: @global_notification_setting, left_align: true
+
+      .clearfix
+
       %hr
       %h5
         Groups (#{@group_notifications.count})
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 2b19ee93eea..f6bfa567fd0 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -29,13 +29,13 @@
           .project-clone-holder
             = render "shared/clone_panel"
 
-      .project-repo-buttons.project-right-buttons
+      .project-repo-buttons.btn-group.project-right-buttons
         - if current_user
           = render 'shared/members/access_request_buttons', source: @project
-        .btn-group
-          = render "projects/buttons/download"
-          = render 'projects/buttons/dropdown'
-          = render 'projects/buttons/notifications'
+
+        = render "projects/buttons/download"
+        = render 'projects/buttons/dropdown'
+        = render 'shared/notifications/button', notification_setting: @notification_setting
 
 :javascript
   new Star();
diff --git a/app/views/projects/buttons/_notifications.html.haml b/app/views/projects/buttons/_notifications.html.haml
deleted file mode 100644
index a7a97181096..00000000000
--- a/app/views/projects/buttons/_notifications.html.haml
+++ /dev/null
@@ -1,11 +0,0 @@
-- if @notification_setting
-  = form_for @notification_setting, url: namespace_project_notification_setting_path(@project.namespace.becomes(Namespace), @project), method: :patch, remote: true, html: { class: 'inline', id: 'notification-form' } do |f|
-    = f.hidden_field :level
-    .dropdown.hidden-sm
-      %button.btn.btn-default.notifications-btn#notifications-button{ data: { toggle: "dropdown" }, aria: { haspopup: "true", expanded: "false" } }
-        = icon('bell')
-        = notification_title(@notification_setting.level)
-        = icon('caret-down')
-      %ul.dropdown-menu.dropdown-menu-no-wrap.dropdown-menu-align-right.dropdown-menu-selectable.dropdown-menu-large{ role: "menu" }
-        - NotificationSetting.levels.each do |level|
-          = notification_list_item(level.first, @notification_setting)
diff --git a/app/views/shared/notifications/_button.html.haml b/app/views/shared/notifications/_button.html.haml
new file mode 100644
index 00000000000..ff1cf966a9b
--- /dev/null
+++ b/app/views/shared/notifications/_button.html.haml
@@ -0,0 +1,25 @@
+- left_align = local_assigns[:left_align]
+- if notification_setting
+  .dropdown.notification-dropdown.pull-right
+    = 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"
+      .js-notification-toggle-btns
+        %div{ class: ("btn-group" if notification_setting.custom?) }
+          - if notification_setting.custom?
+            %button.dropdown-new.btn.btn-default.notifications-btn#notifications-button{ type: "button", data: { toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting) } }
+              = 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) } }
+              %span.caret
+              .sr-only Toggle dropdown
+          - else
+            %button.dropdown-new.btn.btn-default.notifications-btn#notifications-button{ type: "button", data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting) } }
+              = icon("bell", class: "js-notification-loading")
+              = notification_title(notification_setting.level)
+              = icon("caret-down")
+
+          = render "shared/notifications/notification_dropdown", notification_setting: notification_setting, left_align: left_align
+
+          = content_for :scripts_body do
+            = render "shared/notifications/custom_notifications", notification_setting: notification_setting
diff --git a/app/views/shared/notifications/_custom_notifications.html.haml b/app/views/shared/notifications/_custom_notifications.html.haml
new file mode 100644
index 00000000000..b704981e3db
--- /dev/null
+++ b/app/views/shared/notifications/_custom_notifications.html.haml
@@ -0,0 +1,31 @@
+.modal.fade{ tabindex: "-1", role: "dialog", id: notifications_menu_identifier("modal", notification_setting), aria: { labelledby: "custom-notifications-title" } }
+  .modal-dialog
+    .modal-content
+      .modal-header
+        %button.close{ type: "button", data: { dismiss: "modal" }, aria: { label: "close" } }
+          %span{ aria: { hidden: "true" } } ×
+        %h4#custom-notifications-title.modal-title
+          Custom notification events
+
+      .modal-body
+        .container-fluid
+          = form_for notification_setting, html: { class: "custom-notifications-form" } do |f|
+            = hidden_setting_source_input(notification_setting)
+            .row
+              .col-lg-4
+                %h4.prepend-top-0
+                  Notification events
+                %p
+                  Custom notification levels are the same as participating levels. With custom notification levels you will also receive notifications for select events. To find out more, check out
+                  = succeed "." do
+                    %a{ href: "http://docs.gitlab.com/ce/workflow/notifications.html", target: "_blank"} notification emails
+              .col-lg-8
+                - NotificationSetting::EMAIL_EVENTS.each_with_index do |event, index|
+                  - field_id = "#{notifications_menu_identifier("modal", notification_setting)}_notification_setting[#{event}]"
+                  .form-group
+                    .checkbox{ class: ("prepend-top-0" if index == 0) }
+                      %label{ for: field_id }
+                        = check_box("notification_setting", event, id: field_id, class: "js-custom-notification-event", checked: notification_setting.events[event])
+                        %strong
+                          = event.to_s.humanize
+                          = icon("spinner spin", class: "custom-notification-event-loading")
diff --git a/app/views/shared/notifications/_notification_dropdown.html.haml b/app/views/shared/notifications/_notification_dropdown.html.haml
new file mode 100644
index 00000000000..d3258ee64cb
--- /dev/null
+++ b/app/views/shared/notifications/_notification_dropdown.html.haml
@@ -0,0 +1,13 @@
+- left_align = local_assigns[:left_align]
+%ul.dropdown-menu.dropdown-menu-no-wrap.dropdown-menu-selectable.dropdown-menu-large{ role: "menu", class: [notifications_menu_identifier("dropdown", notification_setting), ("dropdown-menu-align-right" unless left_align)] }
+  - NotificationSetting.levels.each_key do |level|
+    - next if level == "custom"
+    - next if level == "global" && notification_setting.source.nil?
+
+    = notification_list_item(level, notification_setting)
+
+  %li.divider
+  %li
+    %a.update-notification{ href: "#", role: "button", class: ("is-active" if notification_setting.custom?), data: { toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), notification_level: "custom", notification_title: "Custom" } }
+      %strong.dropdown-menu-inner-title Custom
+      %span.dropdown-menu-inner-content= notification_description("custom")