Created repository list breadcrumbs Vue app

4 files changed, 67 insertions, 65 deletions

diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index 7f50a7e4294..2b0c3985755 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -4,7 +4,6 @@
 - project = local_assigns.fetch(:project) { @project }
 - content_url = local_assigns.fetch(:content_url) { @tree.readme ? project_blob_path(@project, tree_join(@ref, @tree.readme.path)) : project_tree_path(@project, @ref) }
 - show_auto_devops_callout = show_auto_devops_callout?(@project)
-- vue_file_list = Feature.enabled?(:vue_file_list, @project)
 
 #tree-holder.tree-holder.clearfix
   .nav-block
@@ -14,11 +13,11 @@
     = render 'shared/commit_well', commit: commit, ref: ref, project: project
 
   - if is_project_overview
-    .project-buttons.append-bottom-default{ class: ("js-keep-hidden-on-navigation" if vue_file_list) }
+    .project-buttons.append-bottom-default{ class: ("js-keep-hidden-on-navigation" if vue_file_list_enabled?) }
       = render 'stat_anchor_list', anchors: @project.statistics_buttons(show_auto_devops_callout: show_auto_devops_callout)
 
-  - if vue_file_list
-    #js-tree-list{ data: { project_path: @project.full_path, full_name: @project.name_with_namespace, ref: ref } }
+  - if vue_file_list_enabled?
+    #js-tree-list{ data: { project_path: @project.full_path, project_short_path: @project.path, ref: ref, full_name: @project.name_with_namespace } }
     - if @tree.readme
       = render "projects/tree/readme", readme: @tree.readme
   - else
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 6de8848d3a1..9f5241344a7 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -1,7 +1,7 @@
 - empty_repo = @project.empty_repo?
 - show_auto_devops_callout = show_auto_devops_callout?(@project)
 - max_project_topic_length = 15
-.project-home-panel{ class: [("empty-project" if empty_repo), ("js-keep-hidden-on-navigation" if Feature.enabled?(:vue_file_list, @project))] }
+.project-home-panel{ class: [("empty-project" if empty_repo), ("js-keep-hidden-on-navigation" if vue_file_list_enabled?)] }
   .row.append-bottom-8
     .home-panel-title-row.col-md-12.col-lg-6.d-flex
       .avatar-container.rect-avatar.s64.home-panel-avatar.append-right-default.float-none
diff --git a/app/views/projects/tree/_readme.html.haml b/app/views/projects/tree/_readme.html.haml
index e935af23659..4f6c7e1f9a6 100644
--- a/app/views/projects/tree/_readme.html.haml
+++ b/app/views/projects/tree/_readme.html.haml
@@ -1,5 +1,5 @@
 - if readme.rich_viewer
-  %article.file-holder.readme-holder{ id: 'readme', class: [("limited-width-container" unless fluid_layout), ("js-hide-on-navigation" if Feature.enabled?(:vue_file_list, @project))] }
+  %article.file-holder.readme-holder{ id: 'readme', class: [("limited-width-container" unless fluid_layout), ("js-hide-on-navigation" if vue_file_list_enabled?)] }
     .js-file-title.file-title
       = blob_icon readme.mode, readme.name
       = link_to project_blob_path(@project, tree_join(@ref, readme.path)) do
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index ec8e5234bd4..ea6349f2f57 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -6,71 +6,74 @@
     = render 'shared/ref_switcher', destination: 'tree', path: @path, show_create: true
 
     - if on_top_of_branch?
-      - addtotree_toggle_attributes = { href: '#', 'data-toggle': 'dropdown', 'data-target': '.add-to-tree-dropdown', 'data-boundary': 'window' }
+      - addtotree_toggle_attributes = { 'data-toggle': 'dropdown', 'data-target': '.add-to-tree-dropdown', 'data-boundary': 'window' }
     - else
       - addtotree_toggle_attributes = { title: _("You can only add files when you are on a branch"), data: { container: 'body' }, class: 'disabled has-tooltip' }
 
-  %ul.breadcrumb.repo-breadcrumb
-    %li.breadcrumb-item
-      = link_to project_tree_path(@project, @ref) do
-        = @project.path
-    - path_breadcrumbs do |title, path|
+  - if vue_file_list_enabled?
+    #js-repo-breadcrumb
+  - else
+    %ul.breadcrumb.repo-breadcrumb
       %li.breadcrumb-item
-        = link_to truncate(title, length: 40), project_tree_path(@project, tree_join(@ref, path))
+        = link_to project_tree_path(@project, @ref) do
+          = @project.path
+      - path_breadcrumbs do |title, path|
+        %li.breadcrumb-item
+          = link_to truncate(title, length: 40), project_tree_path(@project, tree_join(@ref, path))
 
-    - if can_collaborate || can_create_mr_from_fork
-      %li.breadcrumb-item
-        %a.btn.add-to-tree.qa-add-to-tree{ addtotree_toggle_attributes }
-          = sprite_icon('plus', size: 16, css_class: 'float-left')
-          = sprite_icon('arrow-down', size: 16, css_class: 'float-left')
-        - if on_top_of_branch?
-          .add-to-tree-dropdown
-            %ul.dropdown-menu
-              - if can_edit_tree?
-                %li.dropdown-header
-                  #{ _('This directory') }
-                %li
-                  = link_to project_new_blob_path(@project, @id), class: 'qa-new-file-option' do
-                    #{ _('New file') }
-                %li
-                  = link_to '#modal-upload-blob', { 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal' } do
-                    #{ _('Upload file') }
-                %li
-                  = link_to '#modal-create-new-dir', { 'data-target' => '#modal-create-new-dir', 'data-toggle' => 'modal' } do
-                    #{ _('New directory') }
-              - elsif can?(current_user, :fork_project, @project) && can?(current_user, :create_merge_request_in, @project)
-                %li
-                  - continue_params = { to: project_new_blob_path(@project, @id),
-                                        notice: edit_in_new_fork_notice,
-                                        notice_now: edit_in_new_fork_notice_now }
-                  - fork_path = project_forks_path(@project, namespace_key: current_user.namespace.id, continue: continue_params)
-                  = link_to fork_path, method: :post do
-                    #{ _('New file') }
-                %li
-                  - continue_params = { to: request.fullpath,
-                                        notice: edit_in_new_fork_notice + " Try to upload a file again.",
-                                        notice_now: edit_in_new_fork_notice_now }
-                  - fork_path = project_forks_path(@project, namespace_key: current_user.namespace.id, continue: continue_params)
-                  = link_to fork_path, method: :post do
-                    #{ _('Upload file') }
-                %li
-                  - continue_params = { to: request.fullpath,
-                                        notice: edit_in_new_fork_notice + " Try to create a new directory again.",
-                                        notice_now: edit_in_new_fork_notice_now }
-                  - fork_path = project_forks_path(@project, namespace_key: current_user.namespace.id, continue: continue_params)
-                  = link_to fork_path, method: :post do
-                    #{ _('New directory') }
+      - if can_collaborate || can_create_mr_from_fork
+        %li.breadcrumb-item
+          %button.btn.add-to-tree.qa-add-to-tree{ addtotree_toggle_attributes, type: 'button' }
+            = sprite_icon('plus', size: 16, css_class: 'float-left')
+            = sprite_icon('arrow-down', size: 16, css_class: 'float-left')
+          - if on_top_of_branch?
+            .add-to-tree-dropdown
+              %ul.dropdown-menu
+                - if can_edit_tree?
+                  %li.dropdown-header
+                    #{ _('This directory') }
+                  %li
+                    = link_to project_new_blob_path(@project, @id), class: 'qa-new-file-option' do
+                      #{ _('New file') }
+                  %li
+                    = link_to '#modal-upload-blob', { 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal' } do
+                      #{ _('Upload file') }
+                  %li
+                    = link_to '#modal-create-new-dir', { 'data-target' => '#modal-create-new-dir', 'data-toggle' => 'modal' } do
+                      #{ _('New directory') }
+                - elsif can?(current_user, :fork_project, @project) && can?(current_user, :create_merge_request_in, @project)
+                  %li
+                    - continue_params = { to: project_new_blob_path(@project, @id),
+                                          notice: edit_in_new_fork_notice,
+                                          notice_now: edit_in_new_fork_notice_now }
+                    - fork_path = project_forks_path(@project, namespace_key: current_user.namespace.id, continue: continue_params)
+                    = link_to fork_path, method: :post do
+                      #{ _('New file') }
+                  %li
+                    - continue_params = { to: request.fullpath,
+                                          notice: edit_in_new_fork_notice + " Try to upload a file again.",
+                                          notice_now: edit_in_new_fork_notice_now }
+                    - fork_path = project_forks_path(@project, namespace_key: current_user.namespace.id, continue: continue_params)
+                    = link_to fork_path, method: :post do
+                      #{ _('Upload file') }
+                  %li
+                    - continue_params = { to: request.fullpath,
+                                          notice: edit_in_new_fork_notice + " Try to create a new directory again.",
+                                          notice_now: edit_in_new_fork_notice_now }
+                    - fork_path = project_forks_path(@project, namespace_key: current_user.namespace.id, continue: continue_params)
+                    = link_to fork_path, method: :post do
+                      #{ _('New directory') }
 
-              - if can?(current_user, :push_code, @project)
-                %li.divider
-                %li.dropdown-header
-                  #{ _('This repository') }
-                %li
-                  = link_to new_project_branch_path(@project) do
-                    #{ _('New branch') }
-                %li
-                  = link_to new_project_tag_path(@project) do
-                    #{ _('New tag') }
+                - if can?(current_user, :push_code, @project)
+                  %li.divider
+                  %li.dropdown-header
+                    #{ _('This repository') }
+                  %li
+                    = link_to new_project_branch_path(@project) do
+                      #{ _('New branch') }
+                  %li
+                    = link_to new_project_tag_path(@project) do
+                      #{ _('New tag') }
 
 .tree-controls
   = link_to s_('Commits|History'), project_commits_path(@project, @id), class: 'btn'