Add new feature to find file

Using the fuzzy filter, develop "file finder" feature.
- feedback(http://feedback.gitlab.com/forums/176466-general/suggestions/4987909-add-file-finder-fuzzy-input-in-files-tab-to-ju )
- fuzzy filter(https://github.com/jeancroy/fuzzaldrin-plus)
- shortcuts(when "t" was hitted at tree view, go to 'file find' page and 'esc' is to go back)
- depends on gitlab_git 7.2.22

CHANGELOG

@@ -106,6 +106,7 @@ v 8.3.0
   - Fix online editor should not remove newlines at the end of the file
   - Expose Git's version in the admin area
   - Show "New Merge Request" buttons on canonical repos when you have a fork (Josh Frye)
+  - Add file finder feature in tree view
 v 8.2.3
   - Fix application settings cache not expiring after changes (Stan Hu)

Gemfile

@@ -49,7 +49,7 @@ gem "browser", '~> 1.0.0'
 # Extracting information from a git repository
 # Provide access to Gitlab::Git library
-gem "gitlab_git", '~> 7.2.20'
+gem "gitlab_git", '~> 7.2.22'
 # LDAP Auth
 # GitLab fork with several improvements to original library. For full list of changes

Gemfile.lock

@@ -887,7 +887,7 @@ DEPENDENCIES
   github-markup (~> 1.3.1)
   gitlab-flowdock-git-hook (~> 1.0.1)
   gitlab_emoji (~> 0.2.0)
-  gitlab_git (~> 7.2.20)
+  gitlab_git (~> 7.2.22)
   gitlab_meta (= 7.0)
   gitlab_omniauth-ldap (~> 1.2.1)
   gollum-lib (~> 4.1.0)

app/assets/javascripts/application.js.coffee

@@ -40,6 +40,7 @@
 #= require shortcuts_network
 #= require jquery.nicescroll.min
 #= require_tree .
+#= require fuzzaldrin-plus.min
 window.slugify = (text) ->
   text.replace(/[^-a-zA-Z0-9]+/g, '_').toLowerCase()

app/assets/javascripts/dispatcher.js.coffee

@@ -87,7 +87,9 @@ class Dispatcher
         new GroupAvatar()
       when 'projects:tree:show'
         new TreeView()
-        shortcut_handler = new ShortcutsNavigation()
+        shortcut_handler = new ShortcutsTree()
+      when 'projects:find_file:show'
+        shortcut_handler = true
       when 'projects:blob:show'
         new LineHighlighter()
         shortcut_handler = new ShortcutsNavigation()

app/assets/javascripts/project_find_file.js.coffee

+class @ProjectFindFile
+  constructor: (@element, @options)->
+    @filePaths = {}
+    @inputElement = @element.find(".file-finder-input")
+
+    # init event
+    @initEvent()
+
+    # focus text input box
+    @inputElement.focus()
+
+    # load file list
+    @load(@options.url)
+
+  # init event
+  initEvent: ->
+    @inputElement.off "keyup"
+    @inputElement.on "keyup", (event) =>
+      target = $(event.target)
+      value = target.val()
+      oldValue = target.data("oldValue") ? ""
+
+      if value != oldValue
+        target.data("oldValue", value)
+        @findFile()
+        @element.find("tr.tree-item").eq(0).addClass("selected").focus()
+
+    @element.find(".tree-content-holder .tree-table").on "click", (event) ->
+      if (event.target.nodeName != "A")
+        path = @element.find(".tree-item-file-name a", this).attr("href")
+        location.href = path if path
+
+  # find file
+  findFile: ->
+    searchText = @inputElement.val()
+    result = if searchText.length > 0 then fuzzaldrinPlus.filter(@filePaths, searchText) else @filePaths
+    @renderList result, searchText
+
+  # files pathes load
+  load: (url) ->
+    $.ajax
+      url: url
+      method: "get"
+      dataType: "json"
+      success: (data) =>
+        @element.find(".loading").hide()
+        @filePaths = data
+        @findFile()
+        @element.find(".files-slider tr.tree-item").eq(0).addClass("selected").focus()
+
+  # render result
+  renderList: (filePaths, searchText) ->
+    @element.find(".tree-table > tbody").empty()
+
+    for filePath, i in filePaths
+      break if i == 20
+
+      if searchText
+        matches = fuzzaldrinPlus.match(filePath, searchText)
+
+      blobItemUrl = "#{@options.blobUrlTemplate}/#{filePath}"
+
+      html = @makeHtml filePath, matches, blobItemUrl
+      @element.find(".tree-table > tbody").append(html)
+
+  # highlight text(awefwbwgtc -> <b>a</b>wefw<b>b</b>wgt<b>c</b> )
+  highlighter = (element, text, matches) ->
+    lastIndex = 0
+    highlightText = ""
+    matchedChars = []
+
+    for matchIndex in matches
+      unmatched = text.substring(lastIndex, matchIndex)
+
+      if unmatched
+        element.append(matchedChars.join("").bold()) if matchedChars.length
+        matchedChars = []
+        element.append(document.createTextNode(unmatched))
+
+      matchedChars.push(text[matchIndex])
+      lastIndex = matchIndex + 1
+
+    element.append(matchedChars.join("").bold()) if matchedChars.length
+    element.append(document.createTextNode(text.substring(lastIndex)))
+
+  # make tbody row html
+  makeHtml: (filePath, matches, blobItemUrl) ->
+    $tr = $("<tr class='tree-item'><td class='tree-item-file-name'><i class='fa fa-file-text-o fa-fw'></i><span class='str-truncated'><a></a></span></td></tr>")
+    if matches
+      $tr.find("a").replaceWith(highlighter($tr.find("a"), filePath, matches).attr("href", blobItemUrl))
+    else
+      $tr.find("a").attr("href", blobItemUrl).text(filePath)
+
+    return $tr
+
+  selectRow: (type) ->
+    rows = @element.find(".files-slider tr.tree-item")
+    selectedRow = @element.find(".files-slider tr.tree-item.selected")
+
+    if rows && rows.length > 0
+      if selectedRow && selectedRow.length > 0
+        if type == "UP"
+          next = selectedRow.prev()
+        else if type == "DOWN"
+          next = selectedRow.next()
+
+        if next.length > 0
+          selectedRow.removeClass "selected"
+          selectedRow = next
+      else
+        selectedRow = rows.eq(0)
+      selectedRow.addClass("selected").focus()
+
+  selectRowUp: =>
+    @selectRow "UP"
+
+  selectRowDown: =>
+    @selectRow "DOWN"
+
+  goToTree: =>
+    location.href = @options.treeUrl
+
+  goToBlob: =>
+    path = @element.find(".tree-item.selected .tree-item-file-name a").attr("href")
+    location.href = path if path

app/assets/javascripts/shortcuts_find_file.js.coffee

+#= require shortcuts_navigation
+
+class @ShortcutsFindFile extends ShortcutsNavigation
+  constructor: (@projectFindFile) ->
+    super()
+    _oldStopCallback = Mousetrap.stopCallback
+    # override to fire shortcuts action when focus in textbox
+    Mousetrap.stopCallback = (event, element, combo) =>
+      if element == @projectFindFile.inputElement[0] and (combo == 'up' or combo == 'down' or combo == 'esc' or combo == 'enter')
+        # when press up/down key in textbox, cusor prevent to move to home/end
+        event.preventDefault()
+        return false
+
+      return _oldStopCallback(event, element, combo)
+
+    Mousetrap.bind('up', @projectFindFile.selectRowUp)
+    Mousetrap.bind('down', @projectFindFile.selectRowDown)
+    Mousetrap.bind('esc', @projectFindFile.goToTree)
+    Mousetrap.bind('enter', @projectFindFile.goToBlob)

app/assets/javascripts/shortcuts_tree.coffee

+class @ShortcutsTree extends ShortcutsNavigation
+  constructor: ->
+    super()
+    Mousetrap.bind('t', -> ShortcutsTree.findAndFollowLink('.shortcuts-find-file'))

app/assets/stylesheets/pages/tree.scss

 .tree-holder {
+  .file-finder {
+    width: 50%;
+    .file-finder-input {
+      width: 95%;
+      display: inline-block;
+    }
+  }
+
   .tree-table {
     margin-bottom: 0;

app/controllers/projects/find_file_controller.rb

+# Controller for viewing a repository's file structure
+class Projects::FindFileController < Projects::ApplicationController
+  include ExtractsPath
+  include ActionView::Helpers::SanitizeHelper
+  include TreeHelper
+
+  before_action :require_non_empty_project
+  before_action :assign_ref_vars
+  before_action :authorize_download_code!
+
+  def show
+    return render_404 unless @repository.commit(@ref)
+
+    respond_to do |format|
+      format.html
+    end
+  end
+
+  def list
+    file_paths = @repo.ls_files(@ref)
+
+    respond_to do |format|
+      format.json { render json: file_paths }
+    end
+  end
+end

app/controllers/projects/refs_controller.rb

@@ -20,6 +20,8 @@ class Projects::RefsController < Projects::ApplicationController
             namespace_project_network_path(@project.namespace, @project, @id, @options)
           when "graphs"
             namespace_project_graph_path(@project.namespace, @project, @id)
+          when "find_file"
+            namespace_project_find_file_path(@project.namespace, @project, @id)
           when "graphs_commits"
             commits_namespace_project_graph_path(@project.namespace, @project, @id)
           else

app/models/repository.rb

@@ -681,6 +681,11 @@ class Repository
     end
   end
+  def ls_files(ref)
+    actual_ref = ref || root_ref
+    raw_repository.ls_files(actual_ref)
+  end
+
   private
   def cache

app/views/help/_shortcuts.html.haml

@@ -40,6 +40,32 @@
                 %td.shortcut
                   .key enter
                 %td Open Selection
+              %tr
+                %td.shortcut
+                  .key t
+                %td Go to finding file
+            %tbody
+              %tr
+                %th
+                %th Finding Project File
+              %tr
+                %td.shortcut
+                  .key
+                    %i.fa.fa-arrow-up
+                %td Move selection up
+              %tr
+                %td.shortcut
+                  .key
+                    %i.fa.fa-arrow-down
+                %td Move selection down
+              %tr
+                %td.shortcut
+                  .key enter
+                %td Open Selection
+              %tr
+                %td.shortcut
+                  .key esc
+                %td Go back
         .col-lg-4
           %table.shortcut-mappings

app/views/layouts/nav/_project.html.haml

@@ -25,7 +25,7 @@
       %span
         Activity
   - if project_nav_tab? :files
-    = nav_link(controller: %w(tree blob blame edit_tree new_tree)) do
+    = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
       = link_to project_files_path(@project), title: 'Files',  class: 'shortcuts-tree' do
         = icon('files-o fw')
         %span
@@ -117,4 +117,3 @@
     %li.hidden
       = link_to namespace_project_network_path(@project.namespace, @project, current_ref), title: 'Network', class: 'shortcuts-network' do
         Network
-

app/views/projects/_find_file_link.html.haml

+= link_to namespace_project_find_file_path(@project.namespace, @project, @ref), class: 'btn btn-grouped shortcuts-find-file', rel: 'nofollow' do
+  = icon('search')
+  %span Find File

app/views/projects/find_file/show.html.haml

+- page_title "Find File", @ref
+- header_title project_title(@project, "Files", project_files_path(@project))
+
+.file-finder-holder.tree-holder.clearfix
+  .gray-content-block.top-block
+    .tree-ref-holder
+      = render 'shared/ref_switcher', destination: 'find_file', path: @path
+    %ul.breadcrumb.repo-breadcrumb
+      %li
+        = link_to namespace_project_tree_path(@project.namespace, @project, @ref) do
+          = @project.path
+      %li.file-finder
+        %input#file_find.form-control.file-finder-input{type: "text", placeholder: 'Find by path'}
+
+  %div.tree-content-holder
+    .table-holder
+      %table.table.files-slider{class: "table_#{@hex_path} tree-table table-striped" }
+        %tbody
+      = spinner nil, true
+
+:coffeescript
+  projectFindFile = new ProjectFindFile($(".file-finder-holder"), {
+    url: "#{escape_javascript(namespace_project_files_path(@project.namespace, @project, @ref, @options.merge(format: :json)))}"
+    treeUrl: "#{escape_javascript(namespace_project_tree_path(@project.namespace, @project, @ref))}"
+    blobUrlTemplate: "#{escape_javascript(namespace_project_blob_path(@project.namespace, @project, @id || @commit.id))}"
+  })
+  new ShortcutsFindFile(projectFindFile)

app/views/projects/tree/show.html.haml

@@ -3,12 +3,12 @@
 = content_for :meta_tags do
   - if current_user
     = auto_discovery_link_tag(:atom, namespace_project_commits_url(@project.namespace, @project, @ref, format: :atom, private_token: current_user.private_token), title: "#{@project.name}:#{@ref} commits")
-
 = render 'projects/last_push'
-- if can? current_user, :download_code, @project
-  .tree-download-holder
-    = render 'projects/repositories/download_archive', ref: @ref, btn_class: 'btn-group pull-right hidden-xs hidden-sm', split_button: true
+.pull-right
+  = render 'projects/find_file_link'
+  - if can? current_user, :download_code, @project
+    = render 'projects/repositories/download_archive', ref: @ref, btn_class: 'hidden-xs hidden-sm btn-grouped', split_button: true
 #tree-holder.tree-holder.clearfix
   .gray-content-block.top-block

config/routes.rb

@@ -440,6 +440,24 @@ Rails.application.routes.draw do
           )
         end
+        scope do
+          get(
+            '/find_file/*id',
+            to: 'find_file#show',
+            constraints: { id: /.+/, format: /html/ },
+            as: :find_file
+          )
+        end
+
+        scope do
+          get(
+            '/files/*id',
+            to: 'find_file#list',
+            constraints: { id: /(?:[^.]|\.(?!json$))+/, format: /json/ },
+            as: :files
+          )
+        end
+
         scope do
           post(
             '/create_dir/*id',

features/project/find_file.feature

+@dashboard
+Feature: Project Find File
+  Background:
+    Given I sign in as a user
+    And I own a project
+    And I visit my project's files page
+
+  @javascript
+  Scenario: Navigate to find file by shortcut
+    Given I press "t"
+    Then I should see "find file" page
+
+  Scenario: Navigate to find file
+    Given I click Find File button
+    Then I should see "find file" page
+
+  @javascript
+  Scenario: I search file
+    Given I visit project find file page
+    And I fill in file find with "change"
+    Then I should not see ".gitignore" in files
+    And I should not see ".gitmodules" in files
+    And I should see "CHANGELOG" in files
+    And I should not see "VERSION" in files
+
+  @javascript
+  Scenario: I search file that not exist
+    Given I visit project find file page
+    And I fill in file find with "asdfghjklqwertyuizxcvbnm"
+    Then I should not see ".gitignore" in files
+    And I should not see ".gitmodules" in files
+    And I should not see "CHANGELOG" in files
+    And I should not see "VERSION" in files
+
+  @javascript
+  Scenario: I search file that partially matches
+    Given I visit project find file page
+    And I fill in file find with "git"
+    Then I should see ".gitignore" in files
+    And I should see ".gitmodules" in files
+    And I should not see "CHANGELOG" in files
+    And I should not see "VERSION" in files