Setup Vue app for repository file listing

Part of https://gitlab.com/gitlab-org/gitlab-ce/issues/61578

3 files changed, 10 insertions, 4 deletions

diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index 22a721ee9ad..0edd8ee5e46 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -4,6 +4,7 @@
 - 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
@@ -13,7 +14,12 @@
     = render 'shared/commit_well', commit: commit, ref: ref, project: project
 
   - if is_project_overview
-    .project-buttons.append-bottom-default
+    .project-buttons.append-bottom-default{ class: ("js-hide-on-navigation" if vue_file_list) }
       = render 'stat_anchor_list', anchors: @project.statistics_buttons(show_auto_devops_callout: show_auto_devops_callout)
 
-  = render 'projects/tree/tree_content', tree: @tree, content_url: content_url
+  - if vue_file_list
+    #js-tree-list{ data: { project_path: @project.full_path, ref: ref } }
+    - if @tree.readme
+      = render "projects/tree/readme", readme: @tree.readme
+  - else
+    = render 'projects/tree/tree_content', tree: @tree, content_url: content_url
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 3ca4abddbb8..a97322dace4 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) }
+.project-home-panel{ class: [("empty-project" if empty_repo), ("js-hide-on-navigation" if Feature.enabled?(:vue_file_list, @project))] }
   .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 4daacbe157c..e935af23659 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) }
+  %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))] }
     .js-file-title.file-title
       = blob_icon readme.mode, readme.name
       = link_to project_blob_path(@project, tree_join(@ref, readme.path)) do