Move the "Design" templates and logic to Preferences

cherry-picked

app/assets/javascripts/profile.js.coffee

@@ -4,7 +4,7 @@ class @Profile
       # Submit the form
       $('.edit_user').submit()
 
-      new Flash("Appearance settings saved", "notice")
+      new Flash('Preferences saved.', 'notice')
 
     $('.update-username form').on 'ajax:before', ->
       $('.loading-gif').show()

app/controllers/profiles/preferences_controller.rb

@@ -24,6 +24,9 @@ class Profiles::PreferencesController < Profiles::ApplicationController
   end
 
   def preferences_params
-    params.require(:user).permit(:color_scheme_id, :theme_id)
+    params.require(:user).permit(
+      :color_scheme_id,
+      :theme_id
+    )
   end
 end

app/controllers/profiles_controller.rb

@@ -8,9 +8,6 @@ class ProfilesController < Profiles::ApplicationController
   def show
   end
 
-  def design
-  end
-
   def applications
     @applications = current_user.oauth_applications
     @authorized_tokens = current_user.oauth_authorized_tokens
@@ -65,10 +62,21 @@ class ProfilesController < Profiles::ApplicationController
 
   def user_params
     params.require(:user).permit(
-      :email, :password, :password_confirmation, :bio, :name,
-      :username, :skype, :linkedin, :twitter, :website_url,
-      :color_scheme_id, :theme_id, :avatar, :hide_no_ssh_key,
-      :hide_no_password, :location, :public_email
+      :avatar,
+      :bio,
+      :email,
+      :hide_no_password,
+      :hide_no_ssh_key,
+      :linkedin,
+      :location,
+      :name,
+      :password,
+      :password_confirmation,
+      :public_email,
+      :skype,
+      :twitter,
+      :username,
+      :website_url
     )
   end
 end

app/views/profiles/design.html.haml

-- page_title "Design"
-%h3.page-title
-  = page_title
-%p.light
-  Appearance settings will be saved to your profile and made available across all devices.
-%hr
-
-= form_for @user, url: profile_path, remote: true, method: :put do |f|
-  .panel.panel-default.application-theme
-    .panel-heading
-      Application theme
-    .panel-body
-      .themes_opts
-        = label_tag do
-          .prev.default
-          = f.radio_button :theme_id, 1
-          Graphite
-
-        = label_tag do
-          .prev.classic
-          = f.radio_button :theme_id, 2
-          Charcoal
-
-        = label_tag do
-          .prev.modern
-          = f.radio_button :theme_id, 3
-          Green
-
-        = label_tag do
-          .prev.gray
-          = f.radio_button :theme_id, 4
-          Gray
-
-        = label_tag do
-          .prev.violet
-          = f.radio_button :theme_id, 5
-          Violet
-
-        = label_tag do
-          .prev.blue
-          = f.radio_button :theme_id, 6
-          Blue
-      %br
-      .clearfix
-
-  .panel.panel-default.code-preview-theme
-    .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

app/views/profiles/preferences/show.html.haml

-TODO
+- page_title "Design"
+%h3.page-title
+  = page_title
+%p.light
+  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|
+  .panel.panel-default.application-theme
+    .panel-heading
+      Application theme
+    .panel-body
+      .themes_opts
+        = label_tag do
+          .prev.default
+          = f.radio_button :theme_id, 1
+          Graphite
+
+        = label_tag do
+          .prev.classic
+          = f.radio_button :theme_id, 2
+          Charcoal
+
+        = label_tag do
+          .prev.modern
+          = f.radio_button :theme_id, 3
+          Green
+
+        = label_tag do
+          .prev.gray
+          = f.radio_button :theme_id, 4
+          Gray
+
+        = label_tag do
+          .prev.violet
+          = f.radio_button :theme_id, 5
+          Violet
+
+        = label_tag do
+          .prev.blue
+          = f.radio_button :theme_id, 6
+          Blue
+      %br
+      .clearfix
+
+  .panel.panel-default.code-preview-theme
+    .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

app/views/profiles/preferences/update.js.erb

-// TODO
+// Remove body class for any previous theme, re-add current one
+$('body').removeClass('<%= Gitlab::Theme.body_classes %>')
+$('body').addClass('<%= app_theme %> <%= theme_type %>')

app/views/profiles/update.js.erb

-// Remove body class for any previous theme, re-add current one
-$('body').removeClass('<%= Gitlab::Theme.body_classes %>')
-$('body').addClass('<%= app_theme %> <%= theme_type %>')

config/routes.rb

@@ -203,7 +203,6 @@ Gitlab::Application.routes.draw do
   resource :profile, only: [:show, :update] do
     member do
       get :history
-      get :design
       get :applications
 
       put :reset_private_token

features/profile/profile.feature

@@ -84,16 +84,3 @@ Feature: Profile
     Then I visit profile applications page
     And I click to remove application
     Then I see that application is removed
-
-  @javascript
-  Scenario: I change my application theme
-    Given I visit profile design page
-    When I change my application theme
-    Then I should see the theme change immediately
-    And I should receive feedback that the changes were saved
-
-  @javascript
-  Scenario: I change my code preview theme
-    Given I visit profile design page
-    When I change my code preview theme
-    Then I should receive feedback that the changes were saved

features/steps/profile/profile.rb

@@ -114,27 +114,6 @@ class Spinach::Features::Profile < Spinach::FeatureSteps
     expect(page).to have_content "#{current_user.name} closed issue"
   end
 
-  step "I change my application theme" do
-    page.within '.application-theme' do
-      choose "Violet"
-    end
-  end
-
-  step "I change my code preview theme" do
-    page.within '.code-preview-theme' do
-      choose "Solarized dark"
-    end
-  end
-
-  step "I should see the theme change immediately" do
-    expect(page).to have_selector('body.ui_color')
-    expect(page).not_to have_selector('body.ui_basic')
-  end
-
-  step "I should receive feedback that the changes were saved" do
-    expect(page).to have_content("saved")
-  end
-
   step 'my password is expired' do
     current_user.update_attributes(password_expires_at: Time.now - 1.hour)
   end

spec/features/profiles/preferences_spec.rb

+require 'spec_helper'
+
+describe 'Profile > Preferences' do
+  let(:user) { create(:user) }
+
+  before do
+    login_as(user)
+  end
+
+  describe 'User changes their application theme', js: true do
+    let(:default_class) { Gitlab::Theme.css_class_by_id(nil) }
+    let(:theme_5_class) { Gitlab::Theme.css_class_by_id(5) }
+
+    before do
+      visit profile_preferences_path
+    end
+
+    it 'changes immediately' do
+      expect(page).to have_selector("body.#{default.css_class}")
+
+      choose "user_theme_id_#{theme.id}"
+
+      expect(page).not_to have_selector("body.#{default.css_class}")
+      expect(page).to have_selector("body.#{theme.css_class}")
+    end
+  end
+
+  describe 'User changes their syntax highlighting theme' do
+    before do
+      visit profile_preferences_path
+    end
+  end
+end