Fixes repository Vue router hiding elements on root URL

3 files changed, 15 insertions, 9 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: '/',