Added multi editor setting on the profile preferences page

12 files changed, 86 insertions, 2 deletions

diff --git a/app/assets/images/multi-editor-off.png b/app/assets/images/multi-editor-off.png
new file mode 100644
index 00000000000..82a6127f853
--- /dev/null
+++ b/app/assets/images/multi-editor-off.png
diff --git a/app/assets/images/multi-editor-on.png b/app/assets/images/multi-editor-on.png
new file mode 100644
index 00000000000..2bcd29abf13
--- /dev/null
+++ b/app/assets/images/multi-editor-on.png
diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js
index 0dc02f012e4..ba4ac850346 100644
--- a/app/assets/javascripts/profile/profile.js
+++ b/app/assets/javascripts/profile/profile.js
@@ -1,4 +1,5 @@
 /* eslint-disable comma-dangle, no-unused-vars, class-methods-use-this, quotes, consistent-return, func-names, prefer-arrow-callback, space-before-function-paren, max-len */
+import Cookies from 'js-cookie';
 import Flash from '../flash';
 import { getPagePath } from '../lib/utils/common_utils';
 
@@ -7,6 +8,8 @@ import { getPagePath } from '../lib/utils/common_utils';
     constructor({ form } = {}) {
       this.onSubmitForm = this.onSubmitForm.bind(this);
       this.form = form || $('.edit-user');
+      this.newRepoActivated = Cookies.get('new_repo');
+      this.setRepoRadio();
       this.bindEvents();
       this.initAvatarGlCrop();
     }
@@ -25,6 +28,7 @@ import { getPagePath } from '../lib/utils/common_utils';
 
     bindEvents() {
       $('.js-preferences-form').on('change.preference', 'input[type=radio]', this.submitForm);
+      $('input[name="user[multi_file]"]').on('change', this.setNewRepoCookie);
       $('#user_notification_email').on('change', this.submitForm);
       $('#user_notified_of_own_activity').on('change', this.submitForm);
       $('.update-username').on('ajax:before', this.beforeUpdateUsername);
@@ -82,6 +86,23 @@ import { getPagePath } from '../lib/utils/common_utils';
         }
       });
     }
+
+    setNewRepoCookie() {
+      if (this.value === 'off') {
+        Cookies.remove('new_repo');
+      } else {
+        Cookies.set('new_repo', true, { expires_in: 365 });
+      }
+    }
+
+    setRepoRadio() {
+      const multiEditRadios = $('input[name="user[multi_file]"]');
+      if (this.newRepoActivated || this.newRepoActivated === 'true') {
+        multiEditRadios.filter('[value=on]').prop('checked', true);
+      } else {
+        multiEditRadios.filter('[value=off]').prop('checked', true);
+      }
+    }
   }
 
   $(function() {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 29714e348a0..ad160f37641 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -516,7 +516,7 @@
 .header-user {
   .dropdown-menu-nav {
     width: auto;
-    min-width: 140px;
+    min-width: 160px;
     margin-top: 4px;
     color: $gl-text-color;
     left: auto;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 1d6c7a5c472..f7853909f56 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -727,3 +727,8 @@ Popup
 $popup-triangle-size: 15px;
 $popup-triangle-border-size: 1px;
 $popup-box-shadow-color: rgba(90, 90, 90, 0.05);
+
+/*
+Multi file editor
+*/
+$border-color-settings: #e1e1e1;
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index c197494b152..68d40b56133 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -20,6 +20,22 @@
   }
 }
 
+.multi-file-editor-options {
+  label {
+    margin-right: 20px;
+    text-align: center;
+  }
+
+  .preview {
+    font-size: 0;
+
+    img {
+      border: 1px solid $border-color-settings;
+      border-radius: 4px;
+    }
+  }
+}
+
 .application-theme {
   label {
     margin-right: 20px;
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 99e7f3b568d..39eb71c2bac 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -56,6 +56,8 @@
                     = link_to "Profile", current_user, class: 'profile-link', data: { user: current_user.username }
                   %li
                     = link_to "Settings", profile_path
+                  %li
+                    = link_to "Turn on multi edit", profile_preferences_path
                   - if current_user
                     %li
                       = link_to "Help", help_path
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 66d1d1e8d44..65328791ce5 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -3,6 +3,23 @@
 = render 'profiles/head'
 
 = form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row prepend-top-default js-preferences-form' } do |f|
+  .col-lg-4
+    %h4.prepend-top-0
+      GitLab multi file editor
+    %p Unlock an additional editing experience which makes it possible to edit and commit multiple files
+  .col-lg-8.multi-file-editor-options
+    = label_tag do
+      .preview.append-bottom-10= image_tag "multi-editor-off.png"
+      = f.radio_button :multi_file, "off", checked: true
+      Off
+    = label_tag do
+      .preview.append-bottom-10= image_tag "multi-editor-on.png"
+      = f.radio_button :multi_file, "on", checked: false
+      On
+
+  .col-sm-12
+    %hr
+
   .col-lg-4.application-theme
     %h4.prepend-top-0
       GitLab navigation theme
diff --git a/changelogs/unreleased/jivl-activate-repo-cookie-preferences.yml b/changelogs/unreleased/jivl-activate-repo-cookie-preferences.yml
new file mode 100644
index 00000000000..778eaa84381
--- /dev/null
+++ b/changelogs/unreleased/jivl-activate-repo-cookie-preferences.yml
@@ -0,0 +1,5 @@
+---
+title: Added option to user preferences to enable the multi file editor
+merge_request: 16056
+author:
+type: added
diff --git a/spec/features/profiles/user_visits_profile_preferences_page_spec.rb b/spec/features/profiles/user_visits_profile_preferences_page_spec.rb
index 90d6841af0e..266af8f4e3d 100644
--- a/spec/features/profiles/user_visits_profile_preferences_page_spec.rb
+++ b/spec/features/profiles/user_visits_profile_preferences_page_spec.rb
@@ -32,6 +32,18 @@ describe 'User visits the profile preferences page' do
     end
   end
 
+  describe 'User changes their multi file editor preferences', :js do
+    it 'set the new_repo cookie when the option is ON' do
+      choose 'user_multi_file_on'
+      expect(get_cookie('new_repo')).not_to be_nil
+    end
+
+    it 'deletes the new_repo cookie when the option is OFF' do
+      choose 'user_multi_file_off'
+      expect(get_cookie('new_repo')).to be_nil
+    end
+  end
+
   describe 'User changes their default dashboard', :js do
     it 'creates a flash message' do
       select 'Starred Projects', from: 'user_dashboard'
diff --git a/spec/features/projects/user_edits_files_spec.rb b/spec/features/projects/user_edits_files_spec.rb
index 5c5c6a398f6..05c2be473da 100644
--- a/spec/features/projects/user_edits_files_spec.rb
+++ b/spec/features/projects/user_edits_files_spec.rb
@@ -33,7 +33,9 @@ describe 'User edits files' do
       binary_file = File.join(project.repository.root_ref, 'files/images/logo-black.png')
       visit(project_blob_path(project, binary_file))
 
-      expect(page).not_to have_link('edit')
+      page.within '.content' do
+        expect(page).not_to have_link('edit')
+      end
     end
 
     it 'commits an edited file', :js do
diff --git a/spec/support/cookie_helper.rb b/spec/support/cookie_helper.rb
index 224619c899c..d72925e1838 100644
--- a/spec/support/cookie_helper.rb
+++ b/spec/support/cookie_helper.rb
@@ -8,6 +8,10 @@ module CookieHelper
     page.driver.browser.manage.add_cookie(name: name, value: value, **options)
   end
 
+  def get_cookie(name)
+    page.driver.browser.manage.cookie_named(name)
+  end
+
   private
 
   def on_a_page?