Review changes18297-i-would-like-text-to-wrap-when-in-edit-mode-on-web-app

Updated tests

7 files changed, 36 insertions, 70 deletions

diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index 8f4a2c7ae84..de6cdd851be 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -65,45 +65,17 @@
     };
 
     EditBlob.prototype.initSoftWrap = function() {
-      this.isExplicitySelected = false
-      this.$filePathInput = $('#file_path, #file_name');
+      this.isSoftWrapped = false;
       this.$toggleButton = $('.soft-wrap-toggle');
-      this.$toggleText = $('span', this.$toggleButton);
-      this.$noWrapIcon = $('.no-wrap-icon', this.$toggleButton);
-      this.$softWrapIcon = $('.soft-wrap-icon', this.$toggleButton);
-      this.checkFilePathIsCode();
-      this.$filePathInput.on('keyup', _.debounce(this.checkFilePathIsCode.bind(this), 300));
-      this.$toggleButton.on('click', this.clickSoftWrapButton.bind(this));
+      this.$toggleButton.on('click', this.toggleSoftWrap.bind(this));
     };
 
-    EditBlob.prototype.toggleSoftWrap = function(forceToggle) {
-      if (_.isBoolean(forceToggle)) {
-        this.isSoftWrapped = forceToggle;
-      } else {
-        this.isSoftWrapped = !this.isSoftWrapped;
-      }
-      if(this.isSoftWrapped) {
-        this.$toggleText.text('No wrap');
-        this.$noWrapIcon.removeClass('hidden');
-        this.$softWrapIcon.addClass('hidden');
-      } else {
-        this.$toggleText.text('Soft wrap');
-        this.$softWrapIcon.removeClass('hidden');
-        this.$noWrapIcon.addClass('hidden');
-      }
+    EditBlob.prototype.toggleSoftWrap = function(e) {
+      this.isSoftWrapped = !this.isSoftWrapped;
+      this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
       this.editor.getSession().setUseWrapMode(this.isSoftWrapped);
     };
 
-    EditBlob.prototype.checkFilePathIsCode = function() {
-      var isNotCode = /^(.*?\.(txt|md)|[^.]*?)$/i.test(this.$filePathInput.val());
-      if (!this.isExplicitySelected) this.toggleSoftWrap(isNotCode);
-    };
-
-    EditBlob.prototype.clickSoftWrapButton = function() {
-      if (!this.isExplicitySelected) this.isExplicitySelected = true;
-      this.toggleSoftWrap();
-    };
-
     return EditBlob;
 
   })();
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index ffd6089c100..e1304335271 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -68,6 +68,24 @@
     font-family: $regular_font;
   }
 
+  .soft-wrap-toggle {
+    margin: 0 $btn-side-margin;
+    .soft-wrap {
+      display: block;
+    }
+    .no-wrap {
+      display: none;
+    }
+    &.soft-wrap-active {
+      .soft-wrap {
+        display: none;
+      }
+      .no-wrap {
+        display: block;
+      }
+    }
+  }
+
   .gitignore-selector, .license-selector, .gitlab-ci-yml-selector {
     .dropdown {
       line-height: 21px;
diff --git a/app/helpers/appearances_helper.rb b/app/helpers/appearances_helper.rb
index 1e8ddb9d423..de13e7a1fc2 100644
--- a/app/helpers/appearances_helper.rb
+++ b/app/helpers/appearances_helper.rb
@@ -31,10 +31,9 @@ module AppearancesHelper
     end
   end
 
-  def custom_icon(icon_name, opts = {})
-    opts[:size] = 16 unless opts[:size]
+  def custom_icon(icon_name, size: 16)
     # We can't simply do the below, because there are some .erb SVGs.
     #  File.read(Rails.root.join("app/views/shared/icons/_#{icon_name}.svg")).html_safe
-    render "shared/icons/#{icon_name}.svg", opts
+    render "shared/icons/#{icon_name}.svg", size: size
   end
 end
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index f225b1be59e..d4f59764a70 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -22,9 +22,12 @@
       .gitlab-ci-yml-selector.js-gitlab-ci-yml-selector-wrap.hidden
         = dropdown_tag("Choose a GitLab CI Yaml template", options: { toggle_class: 'js-gitlab-ci-yml-selector', title: "Choose a template", filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls } } )
       = button_tag class: 'soft-wrap-toggle btn', type: 'button' do
-        = custom_icon('icon_soft_wrap', klass: 'soft-wrap-icon')
-        = custom_icon('icon_no_wrap', klass: 'no-wrap-icon hidden')
-        %span Soft wrap
+        %span.no-wrap
+          = custom_icon('icon_no_wrap')
+          No wrap
+        %span.soft-wrap
+          = custom_icon('icon_soft_wrap')
+          Soft wrap
       .encoding-selector
         = select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'select2'
 
diff --git a/app/views/shared/icons/_icon_no_wrap.svg.erb b/app/views/shared/icons/_icon_no_wrap.svg
index e4c44091ddd..fe34cada002 100644
--- a/app/views/shared/icons/_icon_no_wrap.svg.erb
+++ b/app/views/shared/icons/_icon_no_wrap.svg
@@ -1,3 +1,3 @@
-<svg class="<%= klass %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="m6 11h-4.509c-.263 0-.491.226-.491.505v.991c0 .291.22.505.491.505h4.509v.679c0 .301.194.413.454.236l2.355-1.607c.251-.171.259-.442 0-.619l-2.355-1.607c-.251-.171-.454-.07-.454.236v.681m-5-7.495c0-.279.22-.505.498-.505h13c.275 0 .498.214.498.505v.991c0 .279-.22.505-.498.505h-13c-.275 0-.498-.214-.498-.505v-.991m10 8c0-.279.215-.505.49-.505h3.02c.271 0 .49.214.49.505v.991c0 .279-.215.505-.49.505h-3.02c-.271 0-.49-.214-.49-.505v-.991m-10-4c0-.279.22-.505.498-.505h13c.275 0 .498.214.498.505v.991c0 .279-.22.505-.498.505h-13c-.275 0-.498-.214-.498-.505v-.991"/>
 </svg>
diff --git a/app/views/shared/icons/_icon_soft_wrap.svg.erb b/app/views/shared/icons/_icon_soft_wrap.svg
index d9613b0c3d7..ea27a2024b1 100644
--- a/app/views/shared/icons/_icon_soft_wrap.svg.erb
+++ b/app/views/shared/icons/_icon_soft_wrap.svg
@@ -1,3 +1,3 @@
-<svg class="<%= klass %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="m12 11h-2v-.681c0-.307-.203-.407-.454-.236l-2.355 1.607c-.259.177-.251.448 0 .619l2.355 1.607c.259.177.454.065.454-.236v-.679h2c0 0 0 0 0 0 1.657 0 3-1.343 3-3 0-.828-.336-1.578-.879-2.121-.543-.543-1.293-.879-2.121-.879-.001 0-.002 0-.002 0h-10.497c-.271 0-.5.226-.5.505v.991c0 .291.224.505.5.505h10.497c.001 0 .002 0 .002 0 .552 0 1 .448 1 1 0 .276-.112.526-.293.707-.181.181-.431.293-.707.293m-11-7.495c0-.279.22-.505.498-.505h13c.275 0 .498.214.498.505v.991c0 .279-.22.505-.498.505h-13c-.275 0-.498-.214-.498-.505v-.991m0 8c0-.279.215-.505.49-.505h3.02c.271 0 .49.214.49.505v.991c0 .279-.215.505-.49.505h-3.02c-.271 0-.49-.214-.49-.505v-.991"/>
 </svg>
diff --git a/spec/features/projects/files/edit_file_soft_wrap_spec.rb b/spec/features/projects/files/edit_file_soft_wrap_spec.rb
index 7ad90b4a89c..012befa7990 100644
--- a/spec/features/projects/files/edit_file_soft_wrap_spec.rb
+++ b/spec/features/projects/files/edit_file_soft_wrap_spec.rb
@@ -23,42 +23,16 @@ feature 'User uses soft wrap whilst editing file', feature: true, js: true do
 
   let(:toggle_button) { find('.soft-wrap-toggle') }
 
-  scenario 'user clicks the "No wrap" button and then "Soft wrap" button' do
+  scenario 'user clicks the "Soft wrap" button and then "No wrap" button' do
     wrapped_content_width = get_content_width
     toggle_button.click
-    expect(toggle_button).to have_content 'Soft wrap'
-    unwrapped_content_width = get_content_width
-    expect(unwrapped_content_width).to be > wrapped_content_width
-
-    toggle_button.click
     expect(toggle_button).to have_content 'No wrap'
-    expect(get_content_width).to be < unwrapped_content_width
-  end
-
-  scenario 'user adds a ".js" extension and then changes to a ".md" extension' do
-    wrapped_content_width = get_content_width
-
-    fill_in 'file_name', with: 'test_file-name.js'
-    expect(toggle_button).to have_content 'Soft wrap'
     unwrapped_content_width = get_content_width
-    expect(unwrapped_content_width).to be > wrapped_content_width
-
-    fill_in 'file_name', with: 'test_file-name.md'
-    expect(toggle_button).to have_content 'No wrap'
-    expect(get_content_width).to be < unwrapped_content_width
-  end
-
-  scenario 'user clicks "No wrap" and then changes to a ".md" extension' do
-    wrapped_content_width = get_content_width
+    expect(unwrapped_content_width).to be < wrapped_content_width
 
     toggle_button.click
     expect(toggle_button).to have_content 'Soft wrap'
-    unwrapped_content_width = get_content_width
-    expect(unwrapped_content_width).to be > wrapped_content_width
-
-    fill_in 'file_name', with: 'test_file-name.md'
-    expect(toggle_button).to have_content 'Soft wrap'
-    expect(unwrapped_content_width).to be == get_content_width
+    expect(get_content_width).to be > unwrapped_content_width
   end
 
   def get_content_width