Merge branch 'fix-find-file-links' into 'master'

Fix find file navigation links

## What does this MR do?
Modified the tables in [find file page](https://gitlab.com/ClemMakesApps/gitlab-ce/find_file/master), so that clicking the entire row will go to the file rather than forcing the user to click on the text

## Are there points in the code the reviewer needs to double check?
We should be good

## Why was this MR needed?
Resolve UI inconsistency. Other pages UX indicate that the rows are clickable when highlighted. It is not the case for this page

## Screenshots (if relevant)
Before:
![tdo6Jt3xmd](/uploads/31e7654c49bb141002cfec4ce859fb46/tdo6Jt3xmd.gif)

After:
![NdiIqqHa7R](/uploads/fa440ebaa847064ff098a98dfb7fef57/NdiIqqHa7R.gif)


## Does this MR meet the acceptance criteria?

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

## What are the relevant issue numbers?
Closes #22016

See merge request !6290

2 files changed, 12 insertions, 21 deletions

diff --git a/app/assets/javascripts/project_find_file.js b/app/assets/javascripts/project_find_file.js
index 5bf900f3e1d..8e38ccf7e44 100644
--- a/app/assets/javascripts/project_find_file.js
+++ b/app/assets/javascripts/project_find_file.js
@@ -7,7 +7,6 @@
     function ProjectFindFile(element1, options) {
       this.element = element1;
       this.options = options;
-      this.goToBlob = bind(this.goToBlob, this);
       this.goToTree = bind(this.goToTree, this);
       this.selectRowDown = bind(this.selectRowDown, this);
       this.selectRowUp = bind(this.selectRowUp, this);
@@ -36,16 +35,6 @@
           }
         };
       })(this));
-      return this.element.find(".tree-content-holder .tree-table").on("click", function(event) {
-        var path;
-        if (event.target.nodeName !== "A") {
-          path = this.element.find(".tree-item-file-name a", this).attr("href");
-          if (path) {
-            return location.href = path;
-          }
-        }
-      });
-    // init event
     };
 
     ProjectFindFile.prototype.findFile = function() {
@@ -121,11 +110,12 @@
     // make tbody row html
     ProjectFindFile.prototype.makeHtml = function(filePath, matches, blobItemUrl) {
       var $tr;
-      $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>");
+      $tr = $("<tr class='tree-item'><td class='tree-item-file-name link-container'><a><i class='fa fa-file-text-o fa-fw'></i><span class='str-truncated'></span></a></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);
+        $tr.find("a").attr("href", blobItemUrl);
+        $tr.find(".str-truncated").text(filePath);
       }
       return $tr;
     };
@@ -164,14 +154,6 @@
       return location.href = this.options.treeUrl;
     };
 
-    ProjectFindFile.prototype.goToBlob = function() {
-      var path;
-      path = this.element.find(".tree-item.selected .tree-item-file-name a").attr("href");
-      if (path) {
-        return location.href = path;
-      }
-    };
-
     return ProjectFindFile;
 
   })();
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 1778c069706..7b6577c513e 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -55,6 +55,15 @@
   }
 
   .tree-item {
+    .link-container {
+      padding: 0;
+
+      a {
+        padding: 10px $gl-padding;
+        display: block;
+      }
+    }
+
     .tree-item-file-name {
       max-width: 320px;
       vertical-align: middle;