Merge branch '18297-i-would-like-text-to-wrap-when-in-edit-mode-on-web-app' into 'master'

Added soft wrap option to editor

## What does this MR do?

Adds a `Soft wrap` button to the editor, when clicked, it wraps the text in the editor and changes to `No wrap`, then when clicked, it unwraps the text in the editor.

This will also detect files with no extension, `.txt` or `.md` and proactively set the soft wrap. **Unless**, you explicitly toggle the soft wrap, then it will stop checking the file path and will stay with the users explicit preference.

## Are there points in the code the reviewer needs to double check?

We should talk about the `.txt` and `.md` thing, [I'm not sure if its a good approach](https://gitlab.com/gitlab-org/gitlab-ce/issues/18297#note_14918218).

## Why was this MR needed?

## Screenshots (if relevant)

https://youtu.be/8LW5nQsraSM

#### No wrap

![Screen_Shot_2016-09-02_at_19.54.54](/uploads/97f2d1b2d415d03fe1b0be0640ab12e0/Screen_Shot_2016-09-02_at_19.54.54.png)

#### Soft wrap

![Screen_Shot_2016-09-02_at_19.54.45](/uploads/5af425587ce7198e015cce58440971b9/Screen_Shot_2016-09-02_at_19.54.45.png)

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

Closes #18297

See merge request !6188

CHANGELOG

@@ -12,6 +12,7 @@ v 8.13.0 (unreleased)
   - Revoke button in Applications Settings underlines on hover.
   - Update ruby-prof to 0.16.2. !6026 (Elan Ruusamäe)
   - Add organization field to user profile
+  - Added soft wrap option to editor
   - Optimize GitHub importing for speed and memory
 
 v 8.12.2 (unreleased)

app/assets/javascripts/blob_edit/edit_blob.js

@@ -22,6 +22,7 @@
       // submitted textarea
       })(this));
       this.initModePanesAndLinks();
+      this.initSoftWrap();
       new BlobLicenseSelectors({
         editor: this.editor
       });
@@ -50,6 +51,7 @@
       this.$editModePanes.hide();
       currentPane.fadeIn(200);
       if (paneId === "#preview") {
+        this.$toggleButton.hide();
         return $.post(currentLink.data("preview-url"), {
           content: this.editor.getValue()
         }, function(response) {
@@ -57,10 +59,23 @@
           return currentPane.syntaxHighlight();
         });
       } else {
+        this.$toggleButton.show();
         return this.editor.focus();
       }
     };
 
+    EditBlob.prototype.initSoftWrap = function() {
+      this.isSoftWrapped = false;
+      this.$toggleButton = $('.soft-wrap-toggle');
+      this.$toggleButton.on('click', this.toggleSoftWrap.bind(this));
+    };
+
+    EditBlob.prototype.toggleSoftWrap = function(e) {
+      this.isSoftWrapped = !this.isSoftWrapped;
+      this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
+      this.editor.getSession().setUseWrapMode(this.isSoftWrapped);
+    };
+
     return EditBlob;
 
   })();

app/assets/stylesheets/pages/editor.scss

@@ -59,6 +59,7 @@
   }
 
   .encoding-selector,
+  .soft-wrap-toggle,
   .license-selector,
   .gitignore-selector,
   .gitlab-ci-yml-selector {
@@ -67,6 +68,26 @@
     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;

app/views/projects/blob/_editor.html.haml

@@ -21,6 +21,13 @@
         = dropdown_tag("Choose a .gitignore template", options: { toggle_class: 'js-gitignore-selector', title: "Choose a template", filter: true, placeholder: "Filter", data: { data: gitignore_names } } )
       .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
+        %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'
 

app/views/shared/icons/_icon_no_wrap.svg

+<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>

app/views/shared/icons/_icon_soft_wrap.svg

+<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>

spec/features/projects/files/edit_file_soft_wrap_spec.rb

+require 'spec_helper'
+
+feature 'User uses soft wrap whilst editing file', feature: true, js: true do
+  before do
+    user = create(:user)
+    project = create(:project)
+    project.team << [user, :master]
+    login_as user
+    visit namespace_project_new_blob_path(project.namespace, project, 'master', file_name: 'test_file-name')
+    editor = find('.file-editor.code')
+    editor.click
+    editor.send_keys 'Touch water with paw then recoil in horror chase dog then
+      run away chase the pig around the house eat owner\'s food, and knock
+      dish off table head butt cant eat out of my own dish. Cat is love, cat
+      is life rub face on everything poop on grasses so meow. Playing with
+      balls of wool flee in terror at cucumber discovered on floor run in
+      circles tuxedo cats always looking dapper, but attack dog, run away
+      and pretend to be victim so all of a sudden cat goes crazy, yet chase
+      laser. Make muffins sit in window and stare ooo, a bird! yum lick yarn
+      hanging out of own butt jump off balcony, onto stranger\'s head yet
+      chase laser. Purr for no reason stare at ceiling hola te quiero.'.squish
+  end
+
+  let(:toggle_button) { find('.soft-wrap-toggle') }
+
+  scenario 'user clicks the "No wrap" button and then "Soft 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
+
+    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
+  end
+
+  def get_content_width
+    find('.ace_content')[:style].slice!(/width: \d+/).slice!(/\d+/)
+  end
+end