Merge branch 'improve-web-edit' into 'master'

Improve web editor

* focus on web editor
* Make editor looks same for new and edit file
* Refactor editor JS
* Improved satellite logic for new files

See merge request !1441

app/assets/javascripts/blob/edit_blob.js.coffee

+class @EditBlob
+  constructor: (assets_path, mode)->
+    ace.config.set "modePath", assets_path + '/ace'
+    ace.config.loadModule "ace/ext/searchbox"
+    if mode
+      ace_mode = mode
+    editor = ace.edit("editor")
+    editor.focus()
+    @editor = editor
+
+    if ace_mode
+      editor.getSession().setMode "ace/mode/" + ace_mode
+
+    disableButtonIfEmptyField "#commit_message", ".js-commit-button"
+    $(".js-commit-button").click ->
+      $("#file-content").val editor.getValue()
+      $(".file-editor form").submit()
+      return
+
+    editModePanes = $(".js-edit-mode-pane")
+    editModeLinks = $(".js-edit-mode a")
+    editModeLinks.click (event) ->
+      event.preventDefault()
+      currentLink = $(this)
+      paneId = currentLink.attr("href")
+      currentPane = editModePanes.filter(paneId)
+      editModeLinks.parent().removeClass "active hover"
+      currentLink.parent().addClass "active hover"
+      editModePanes.hide()
+      if paneId is "#preview"
+        currentPane.fadeIn 200
+        $.post currentLink.data("preview-url"),
+          content: editor.getValue()
+        , (response) ->
+          currentPane.empty().append response
+          return
+
+      else
+        currentPane.fadeIn 200
+        editor.focus()
+      return
+
+  editor: ->
+    return @editor

app/assets/javascripts/blob/new_blob.js.coffee

+class @NewBlob
+  constructor: (assets_path, mode)->
+    ace.config.set "modePath", assets_path + '/ace'
+    ace.config.loadModule "ace/ext/searchbox"
+    if mode
+      ace_mode = mode
+    editor = ace.edit("editor")
+    editor.focus()
+    @editor = editor
+
+    if ace_mode
+      editor.getSession().setMode "ace/mode/" + ace_mode
+
+    disableButtonIfEmptyField "#commit_message", ".js-commit-button"
+    $(".js-commit-button").click ->
+      $("#file-content").val editor.getValue()
+      $(".file-editor form").submit()
+      return
+
+  editor: ->
+    return @editor

app/assets/stylesheets/sections/editor.scss

@@ -31,4 +31,26 @@
       margin: 5px 8px 0 8px;
     }
   }
+
+  .file-title {
+    @extend .monospace;
+    font-size: 14px;
+    padding: 5px;
+  }
+
+  .editor-ref {
+    background: #f5f5f5;
+    padding: 11px 15px;
+    border-right: 1px solid #CCC;
+    display: inline-block;
+    margin: -5px -5px;
+    margin-right: 10px;
+  }
+
+  .editor-file-name {
+    .new-file-name {
+      display: inline-block;
+      width: 200px;
+    }
+  }
 }

app/helpers/projects_helper.rb

@@ -189,6 +189,8 @@ module ProjectsHelper
             elsif current_controller?(:blob)
               if current_action?(:new) || current_action?(:create)
                 "New file at #{@ref}"
+              elsif current_action?(:show)
+                "#{@blob.path} at #{@ref}"
               elsif @blob
                 "Edit file #{@blob.path} at #{@ref}"
               end

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

 .file-holder.file
   .file-title
-    %i.icon-file
-    %span.file_name
-      %span.monospace.light #{ref}
-      - if local_assigns[:path]
-        = ': ' + local_assigns[:path]
+    .editor-ref
+      %i.fa.fa-code-fork
+      = ref
+    %span.editor-file-name
+      - if @path
+        %span.monospace
+          = @path
+
+      - if current_action?(:new) || current_action?(:create)
+        \/
+        = text_field_tag 'file_name', params[:file_name], placeholder: "File name",
+          required: true, class: 'form-control new-file-name'
+        .pull-right
+          = select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'form-control'
+
   .file-content.code
     %pre.js-edit-mode-pane#editor
       = params[:content] || local_assigns[:blob_data]

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

@@ -11,7 +11,7 @@
         = editing_preview_title(@blob.name)
 
   = form_tag(project_update_blob_path(@project, @id), method: :put, class: "form-horizontal") do
-    = render 'projects/blob_editor', ref: @ref, path: @path, blob_data: @blob.data
+    = render 'projects/blob/editor', ref: @ref, path: @path, blob_data: @blob.data
     = render 'shared/commit_message_container', params: params,
              placeholder: "Update #{@blob.name}"
     = hidden_field_tag 'last_commit', @last_commit
@@ -21,42 +21,4 @@
               cancel_path: @after_edit_path
 
 :javascript
-  ace.config.set("modePath", gon.relative_url_root + "#{Gitlab::Application.config.assets.prefix}/ace")
-  ace.config.loadModule("ace/ext/searchbox");
-  var ace_mode = "#{@blob.language.try(:ace_mode)}";
-  var editor = ace.edit("editor");
-  if (ace_mode) {
-    editor.getSession().setMode('ace/mode/' + ace_mode);
-  }
-
-  disableButtonIfEmptyField("#commit_message", ".js-commit-button");
-
-  $(".js-commit-button").click(function(){
-    $("#file-content").val(editor.getValue());
-    $(".file-editor form").submit();
-  });
-
-  var editModePanes = $('.js-edit-mode-pane'),
-      editModeLinks = $('.js-edit-mode a');
-
-  editModeLinks.click(function(event) {
-    event.preventDefault();
-
-    var currentLink = $(this),
-        paneId = currentLink.attr('href'),
-        currentPane = editModePanes.filter(paneId);
-
-    editModeLinks.parent().removeClass('active hover');
-    currentLink.parent().addClass('active hover');
-    editModePanes.hide();
-
-    if (paneId == '#preview') {
-      currentPane.fadeIn(200);
-      $.post(currentLink.data('preview-url'), { content: editor.getValue() }, function(response) {
-        currentPane.empty().append(response);
-      })
-    } else {
-      currentPane.fadeIn(200);
-      editor.focus()
-    }
-  })
+  blob = new EditBlob(gon.relative_url_root + "#{Gitlab::Application.config.assets.prefix}", "#{@blob.language.try(:ace_mode)}")

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

 %h3.page-title New file
-%hr
 .file-editor
   = form_tag(project_create_blob_path(@project, @id), method: :post, class: 'form-horizontal form-new-file') do
-    .form-group.commit_message-group
-      = label_tag 'file_name', class: 'control-label' do
-        File name
-      .col-sm-10
-        .input-group
-          %span.input-group-addon
-            = @path[-1] == "/" ? @path : @path + "/"
-          = text_field_tag 'file_name', params[:file_name], placeholder: "sample.rb", required: true, class: 'form-control'
-          %span.input-group-addon
-            on
-            %span= @ref
-
-    .form-group.commit_message-group
-      = label_tag :encoding, class: "control-label" do
-        Encoding
-      .col-sm-10
-        = select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'form-control'
-    = render 'projects/blob_editor', ref: @ref
+    = render 'projects/blob/editor', ref: @ref
     = render 'shared/commit_message_container', params: params,
              placeholder: 'Add new file'
     = hidden_field_tag 'content', '', id: 'file-content'
@@ -27,12 +9,4 @@
               cancel_path: project_tree_path(@project, @id)
 
 :javascript
-  ace.config.set("modePath", gon.relative_url_root + "#{Gitlab::Application.config.assets.prefix}/ace-src-noconflict")
-  var editor = ace.edit("editor");
-
-  disableButtonIfAnyEmptyField($('.form-new-file'), '.form-control', '.btn-create')
-
-  $(".js-commit-button").click(function(){
-    $("#file-content").val(editor.getValue());
-    $(".file-editor form").submit();
-  });
+  blob = new NewBlob(gon.relative_url_root + "#{Gitlab::Application.config.assets.prefix}", null)

features/steps/project/source/browse_files.rb

@@ -58,7 +58,7 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
 
   step 'I can edit code' do
     set_new_content
-    evaluate_script('editor.getValue()').should == new_gitignore_content
+    evaluate_script('blob.editor.getValue()').should == new_gitignore_content
   end
 
   step 'I edit code' do
@@ -103,7 +103,6 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
 
   step 'I can see new file page' do
     page.should have_content "New file"
-    page.should have_content "File name"
     page.should have_content "Commit message"
   end
 
@@ -170,7 +169,7 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
   private
 
   def set_new_content
-    execute_script("editor.setValue('#{new_gitignore_content}')")
+    execute_script("blob.editor.setValue('#{new_gitignore_content}')")
   end
 
   # Content of the gitignore file on the seed repository.

lib/gitlab/satellite/files/new_file_action.rb

@@ -15,12 +15,12 @@ module Gitlab
 
           # create target branch in satellite at the corresponding commit from bare repo
           current_ref =
-            if repo.commits.any?
-              repo.git.checkout({raise: true, timeout: true, b: true}, ref, "origin/#{ref}")
-              ref
-            else
+            if @project.empty_repo?
               # skip this step if we want to add first file to empty repo
               Satellite::PARKING_BRANCH
+            else
+              repo.git.checkout({raise: true, timeout: true, b: true}, ref, "origin/#{ref}")
+              ref
             end
 
           file_path_in_satellite = File.join(repo.working_dir, file_path)