Simplify the javascript behavior for Preference updating

cherry-picked

4 files changed, 19 insertions, 15 deletions

diff --git a/app/assets/javascripts/profile.js.coffee b/app/assets/javascripts/profile.js.coffee
index a402973a543..bb0b66b86e1 100644
--- a/app/assets/javascripts/profile.js.coffee
+++ b/app/assets/javascripts/profile.js.coffee
@@ -1,10 +1,8 @@
 class @Profile
   constructor: ->
-    $('.edit_user .application-theme input, .edit_user .code-preview-theme input').click ->
-      # Submit the form
-      $('.edit_user').submit()
-
-      new Flash('Preferences saved.', 'notice')
+    # Automatically submit the Preferences form when any of its radio buttons change
+    $('.js-preferences-form').on 'change.preference', 'input[type=radio]', ->
+      $(this).parents('form').submit()
 
     $('.update-username form').on 'ajax:before', ->
       $('.loading-gif').show()
@@ -18,7 +16,6 @@ class @Profile
     $('.update-notifications').on 'ajax:complete', ->
       $(this).find('.btn-save').enable()
 
-
     $('.js-choose-user-avatar-button').bind "click", ->
       form = $(this).closest("form")
       form.find(".js-user-avatar-input").click()
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 2fc47227c38..59df8497805 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -5,7 +5,7 @@
   Appearance settings will be saved to your profile and made available across all devices.
 %hr
 
-= form_for @user, url: profile_preferences_path, remote: true, method: :put do |f|
+= form_for @user, url: profile_preferences_path, remote: true, method: :put, html: {class: 'js-preferences-form'} do |f|
   .panel.panel-default.application-theme
     .panel-heading
       Application theme
@@ -47,10 +47,8 @@
     .panel-heading
       Code preview theme
     .panel-body
-      .code_highlight_opts
-        - color_schemes.each do |color_scheme_id, color_scheme|
-          = label_tag do
-            .prev
-              = image_tag "#{color_scheme}-scheme-preview.png"
-            = f.radio_button :color_scheme_id, color_scheme_id
-            = color_scheme.gsub(/[-_]+/, ' ').humanize
+      - color_schemes.each do |color_scheme_id, color_scheme|
+        = label_tag do
+          .preview= image_tag "#{color_scheme}-scheme-preview.png"
+          = f.radio_button :color_scheme_id, color_scheme_id
+          = color_scheme.tr('-_', ' ').titleize
diff --git a/app/views/profiles/preferences/update.js.erb b/app/views/profiles/preferences/update.js.erb
index db37619136d..ad4118eabc1 100644
--- a/app/views/profiles/preferences/update.js.erb
+++ b/app/views/profiles/preferences/update.js.erb
@@ -1,3 +1,4 @@
 // Remove body class for any previous theme, re-add current one
 $('body').removeClass('<%= Gitlab::Theme.body_classes %>')
 $('body').addClass('<%= app_theme %> <%= theme_type %>')
+new Flash('<%= flash.discard(:notice) %>', 'notice')
diff --git a/spec/features/profiles/preferences_spec.rb b/spec/features/profiles/preferences_spec.rb
index 0e033652a9c..04aa64343d5 100644
--- a/spec/features/profiles/preferences_spec.rb
+++ b/spec/features/profiles/preferences_spec.rb
@@ -15,7 +15,15 @@ describe 'Profile > Preferences' do
       visit profile_preferences_path
     end
 
-    it 'changes immediately' do
+    it 'creates a flash message' do
+      choose "user_theme_id_#{theme.id}"
+
+      within('.flash-container') do
+        expect(page).to have_content('Preferences saved.')
+      end
+    end
+
+    it 'reflects the changes immediately' do
       expect(page).to have_selector("body.#{default.css_class}")
 
       choose "user_theme_id_#{theme.id}"