Merge branch 'ide_render_whitespaces' into 'master'

Ide render whitespaces

See merge request gitlab-org/gitlab!17244

app/assets/javascripts/ide/components/repo_editor.vue

@@ -32,7 +32,13 @@ export default {
     ...mapState('rightPane', {
       rightPaneIsOpen: 'isOpen',
     }),
-    ...mapState(['rightPanelCollapsed', 'viewer', 'panelResizing', 'currentActivityView']),
+    ...mapState([
+      'rightPanelCollapsed',
+      'viewer',
+      'panelResizing',
+      'currentActivityView',
+      'renderWhitespaceInCode',
+    ]),
     ...mapGetters([
       'currentMergeRequest',
       'getStagedFile',
@@ -76,6 +82,11 @@ export default {
     showEditor() {
       return !this.shouldHideEditor && this.isEditorViewMode;
     },
+    editorOptions() {
+      return {
+        renderWhitespace: this.renderWhitespaceInCode ? 'all' : 'none',
+      };
+    },
   },
   watch: {
     file(newVal, oldVal) {
@@ -131,7 +142,7 @@ export default {
   },
   mounted() {
     if (!this.editor) {
-      this.editor = Editor.create();
+      this.editor = Editor.create(this.editorOptions);
     }
     this.initEditor();
   },

app/assets/javascripts/ide/index.js

@@ -50,6 +50,7 @@ export function initIde(el, options = {}) {
       });
       this.setInitialData({
         clientsidePreviewEnabled: parseBoolean(el.dataset.clientsidePreviewEnabled),
+        renderWhitespaceInCode: parseBoolean(el.dataset.renderWhitespaceInCode),
       });
     },
     methods: {

app/assets/javascripts/ide/lib/editor.js

@@ -23,20 +23,24 @@ export const clearDomElement = el => {
 };
 
 export default class Editor {
-  static create() {
+  static create(options = {}) {
     if (!this.editorInstance) {
-      this.editorInstance = new Editor();
+      this.editorInstance = new Editor(options);
     }
     return this.editorInstance;
   }
 
-  constructor() {
+  constructor(options = {}) {
     this.currentModel = null;
     this.instance = null;
     this.dirtyDiffController = null;
     this.disposable = new Disposable();
     this.modelManager = new ModelManager();
     this.decorationsController = new DecorationsController(this);
+    this.options = {
+      ...defaultEditorOptions,
+      ...options,
+    };
 
     setupMonacoTheme();
 
@@ -51,7 +55,7 @@ export default class Editor {
 
       this.disposable.add(
         (this.instance = monacoEditor.create(domElement, {
-          ...defaultEditorOptions,
+          ...this.options,
         })),
         (this.dirtyDiffController = new DirtyDiffController(
           this.modelManager,
@@ -71,7 +75,7 @@ export default class Editor {
 
       this.disposable.add(
         (this.instance = monacoEditor.createDiffEditor(domElement, {
-          ...defaultEditorOptions,
+          ...this.options,
           quickSuggestions: false,
           occurrencesHighlight: false,
           renderSideBySide: Editor.renderSideBySide(domElement),

app/assets/javascripts/ide/stores/state.js

@@ -31,4 +31,5 @@ export default () => ({
     entry: {},
   },
   clientsidePreviewEnabled: false,
+  renderWhitespaceInCode: false,
 });

app/controllers/profiles/preferences_controller.rb

@@ -48,7 +48,8 @@ class Profiles::PreferencesController < Profiles::ApplicationController
       :time_display_relative,
       :time_format_in_24h,
       :show_whitespace_in_diffs,
-      :sourcegraph_enabled
+      :sourcegraph_enabled,
+      :render_whitespace_in_code
     ]
   end
 end

app/helpers/ide_helper.rb

@@ -10,7 +10,8 @@ module IdeHelper
       "promotion-svg-path": image_path('illustrations/web-ide_promotion.svg'),
       "ci-help-page-path" => help_page_path('ci/quick_start/README'),
       "web-ide-help-page-path" => help_page_path('user/project/web_ide/index.html'),
-      "clientside-preview-enabled": Gitlab::CurrentSettings.current_application_settings.web_ide_clientside_preview_enabled.to_s
+      "clientside-preview-enabled": Gitlab::CurrentSettings.current_application_settings.web_ide_clientside_preview_enabled.to_s,
+      "render-whitespace-in-code": current_user.render_whitespace_in_code.to_s
     }
   end
 end

app/models/user.rb

@@ -246,6 +246,7 @@ class User < ApplicationRecord
   delegate :show_whitespace_in_diffs, :show_whitespace_in_diffs=, to: :user_preference
   delegate :sourcegraph_enabled, :sourcegraph_enabled=, to: :user_preference
   delegate :setup_for_company, :setup_for_company=, to: :user_preference
+  delegate :render_whitespace_in_code, :render_whitespace_in_code=, to: :user_preference
 
   accepts_nested_attributes_for :user_preference, update_only: true
 

app/models/user_preference.rb

@@ -13,6 +13,7 @@ class UserPreference < ApplicationRecord
   default_value_for :timezone, value: Time.zone.tzinfo.name, allows_nil: false
   default_value_for :time_display_relative, value: true, allows_nil: false
   default_value_for :time_format_in_24h, value: false, allows_nil: false
+  default_value_for :render_whitespace_in_code, value: false, allows_nil: false
 
   class << self
     def notes_filters

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

@@ -61,10 +61,14 @@
       = f.select :project_view, project_view_choices, {}, class: 'select2'
       .form-text.text-muted
         = s_('Preferences|Choose what content you want to see on a project’s overview page.')
+    .form-group.form-check
+      = f.check_box :render_whitespace_in_code, class: 'form-check-input'
+      = f.label :render_whitespace_in_code, class: 'form-check-label' do
+        = s_('Preferences|Render whitespace characters in the Web IDE')
     .form-group.form-check
       = f.check_box :show_whitespace_in_diffs, class: 'form-check-input'
       = f.label :show_whitespace_in_diffs, class: 'form-check-label' do
-        = s_('Preferences|Show whitespace in diffs')
+        = s_('Preferences|Show whitespace changes in diffs')
 
   .col-sm-12
     %hr

changelogs/unreleased/ide_render_whitespaces.yml

+---
+title: Render whitespaces in code
+merge_request: 17244
+author: Mathieu Parent
+type: added

db/migrate/20191207104000_add_render_whitespace_in_code_to_user_preference.rb

+# frozen_string_literal: true
+
+class AddRenderWhitespaceInCodeToUserPreference < ActiveRecord::Migration[5.1]
+  include Gitlab::Database::MigrationHelpers
+
+  DOWNTIME = false
+
+  disable_ddl_transaction!
+
+  def up
+    add_column(:user_preferences, :render_whitespace_in_code, :boolean)
+  end
+
+  def down
+    remove_column(:user_preferences, :render_whitespace_in_code)
+  end
+end

db/schema.rb

@@ -4038,6 +4038,7 @@ ActiveRecord::Schema.define(version: 2020_01_02_170221) do
     t.boolean "show_whitespace_in_diffs", default: true, null: false
     t.boolean "sourcegraph_enabled"
     t.boolean "setup_for_company"
+    t.boolean "render_whitespace_in_code"
     t.index ["user_id"], name: "index_user_preferences_on_user_id", unique: true
   end
 

locale/gitlab.pot

@@ -13299,7 +13299,10 @@ msgstr ""
 msgid "Preferences|Project overview content"
 msgstr ""
 
-msgid "Preferences|Show whitespace in diffs"
+msgid "Preferences|Render whitespace characters in the Web IDE"
+msgstr ""
+
+msgid "Preferences|Show whitespace changes in diffs"
 msgstr ""
 
 msgid "Preferences|Sourcegraph"

spec/controllers/profiles/preferences_controller_spec.rb

@@ -46,7 +46,8 @@ describe Profiles::PreferencesController do
           dashboard: 'stars',
           theme_id: '2',
           first_day_of_week: '1',
-          preferred_language: 'jp'
+          preferred_language: 'jp',
+          render_whitespace_in_code: 'true'
         }.with_indifferent_access
 
         expect(user).to receive(:assign_attributes).with(ActionController::Parameters.new(prefs).permit!)

spec/features/profiles/user_visits_profile_preferences_page_spec.rb

@@ -86,6 +86,23 @@ describe 'User visits the profile preferences page' do
     end
   end
 
+  describe 'User changes whitespace in code' do
+    it 'updates their preference' do
+      expect(user.render_whitespace_in_code).to be(false)
+      expect(render_whitespace_field).not_to be_checked
+      render_whitespace_field.click
+
+      click_button 'Save changes'
+
+      expect(user.reload.render_whitespace_in_code).to be(true)
+      expect(render_whitespace_field).to be_checked
+    end
+  end
+
+  def render_whitespace_field
+    find_field('user[render_whitespace_in_code]')
+  end
+
   def expect_preferences_saved_message
     page.within('.flash-container') do
       expect(page).to have_content('Preferences saved.')

spec/javascripts/ide/components/repo_editor_spec.js

@@ -52,6 +52,18 @@ describe('RepoEditor', () => {
     state.rightPanelCollapsed = !state.rightPanelCollapsed;
   };
 
+  it('sets renderWhitespace to `all`', () => {
+    vm.$store.state.renderWhitespaceInCode = true;
+
+    expect(vm.editorOptions.renderWhitespace).toEqual('all');
+  });
+
+  it('sets renderWhitespace to `none`', () => {
+    vm.$store.state.renderWhitespaceInCode = false;
+
+    expect(vm.editorOptions.renderWhitespace).toEqual('none');
+  });
+
   it('renders an ide container', () => {
     expect(vm.shouldHideEditor).toBeFalsy();
     expect(vm.showEditor).toBe(true);

spec/javascripts/ide/lib/editor_spec.js

@@ -67,6 +67,7 @@ describe('Multi-file editor library', () => {
         },
         readOnly: true,
         scrollBeyondLastLine: false,
+        renderWhitespace: 'none',
         quickSuggestions: false,
         occurrencesHighlight: false,
         wordWrap: 'on',

spec/views/profiles/preferences/show.html.haml_spec.rb

@@ -12,6 +12,16 @@ describe 'profiles/preferences/show' do
     allow(controller).to receive(:current_user).and_return(user)
   end
 
+  context 'behavior' do
+    before do
+      render
+    end
+
+    it 'has option for Render whitespace characters in the Web IDE' do
+      expect(rendered).to have_unchecked_field('Render whitespace characters in the Web IDE')
+    end
+  end
+
   context 'sourcegraph' do
     def have_sourcegraph_field(*args)
       have_field('user_sourcegraph_enabled', *args)