Fixes repository Vue router hiding elements on root URL

5 files changed, 17 insertions, 11 deletions

diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue
index 2b0a4644bf6..f4df98ac2ff 100644
--- a/app/assets/javascripts/repository/components/table/index.vue
+++ b/app/assets/javascripts/repository/components/table/index.vue
@@ -50,7 +50,7 @@ export default {
       );
     },
     showParentRow() {
-      return !this.isLoadingFiles && this.path !== '';
+      return !this.isLoadingFiles && ['', '/'].indexOf(this.path) === -1;
     },
   },
   watch: {
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index a5c125c2ff7..f992d4b6d54 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -17,6 +17,19 @@ export default function setupVueRepositoryList() {
   });
 
   router.afterEach(({ params: { pathMatch } }) => setTitle(pathMatch, ref, fullName));
+  router.afterEach(to => {
+    const isRoot = to.params.pathMatch === undefined || to.params.pathMatch === '/';
+
+    if (!isRoot) {
+      document
+        .querySelectorAll('.js-keep-hidden-on-navigation')
+        .forEach(elem => elem.classList.add('hidden'));
+    }
+
+    document
+      .querySelectorAll('.js-hide-on-navigation')
+      .forEach(elem => elem.classList.toggle('hidden', !isRoot));
+  });
 
   return new Vue({
     el,
diff --git a/app/assets/javascripts/repository/router.js b/app/assets/javascripts/repository/router.js
index f7132b99d9e..9322c81ab97 100644
--- a/app/assets/javascripts/repository/router.js
+++ b/app/assets/javascripts/repository/router.js
@@ -16,15 +16,8 @@ export default function createRouter(base, baseRef) {
         name: 'treePath',
         component: TreePage,
         props: route => ({
-          path: route.params.pathMatch.replace(/^\//, ''),
+          path: route.params.pathMatch && route.params.pathMatch.replace(/^\//, ''),
         }),
-        beforeEnter(to, from, next) {
-          document
-            .querySelectorAll('.js-hide-on-navigation')
-            .forEach(el => el.classList.add('hidden'));
-
-          next();
-        },
       },
       {
         path: '/',
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index bb46b440c18..7f50a7e4294 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -14,7 +14,7 @@
     = render 'shared/commit_well', commit: commit, ref: ref, project: project
 
   - if is_project_overview
-    .project-buttons.append-bottom-default{ class: ("js-hide-on-navigation" if vue_file_list) }
+    .project-buttons.append-bottom-default{ class: ("js-keep-hidden-on-navigation" if vue_file_list) }
       = render 'stat_anchor_list', anchors: @project.statistics_buttons(show_auto_devops_callout: show_auto_devops_callout)
 
   - if vue_file_list
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index a97322dace4..6de8848d3a1 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-hide-on-navigation" if Feature.enabled?(:vue_file_list, @project))] }
+.project-home-panel{ class: [("empty-project" if empty_repo), ("js-keep-hidden-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