Simplify the javascript behavior for Preference updating

cherry-picked

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()

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

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')

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}"