Add latest changes from gitlab-org/gitlab@master

5 files changed, 43 insertions, 19 deletions

diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index de7350f0d2f..d826f209815 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -16,7 +16,6 @@ export default function setupVueRepositoryList() {
   const { dataset } = el;
   const { projectPath, projectShortPath, ref, fullName } = dataset;
   const router = createRouter(projectPath, ref);
-  const hideOnRootEls = document.querySelectorAll('.js-hide-on-root');
 
   apolloProvider.clients.defaultClient.cache.writeData({
     data: {
@@ -28,20 +27,7 @@ export default function setupVueRepositoryList() {
   });
 
   router.afterEach(({ params: { pathMatch } }) => {
-    const isRoot = pathMatch === undefined || pathMatch === '/';
-
     setTitle(pathMatch, ref, fullName);
-
-    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));
-    hideOnRootEls.forEach(elem => elem.classList.toggle('hidden', isRoot));
   });
 
   const breadcrumbEl = document.getElementById('js-repo-breadcrumb');
diff --git a/app/assets/javascripts/repository/pages/index.vue b/app/assets/javascripts/repository/pages/index.vue
index 967f4a99281..29786bf4ec8 100644
--- a/app/assets/javascripts/repository/pages/index.vue
+++ b/app/assets/javascripts/repository/pages/index.vue
@@ -1,13 +1,25 @@
 <script>
-import TreeContent from '../components/tree_content.vue';
+import TreePage from './tree.vue';
+import { updateElementsVisibility } from '../utils/dom';
 
 export default {
   components: {
-    TreeContent,
+    TreePage,
+  },
+  mounted() {
+    this.updateProjectElements(true);
+  },
+  beforeDestroy() {
+    this.updateProjectElements(false);
+  },
+  methods: {
+    updateProjectElements(isShow) {
+      updateElementsVisibility('.js-show-on-project-root', isShow);
+    },
   },
 };
 </script>
 
 <template>
-  <tree-content />
+  <tree-page path="/" />
 </template>
diff --git a/app/assets/javascripts/repository/pages/tree.vue b/app/assets/javascripts/repository/pages/tree.vue
index 19300099449..dd4d437f4dd 100644
--- a/app/assets/javascripts/repository/pages/tree.vue
+++ b/app/assets/javascripts/repository/pages/tree.vue
@@ -1,5 +1,6 @@
 <script>
 import TreeContent from '../components/tree_content.vue';
+import { updateElementsVisibility } from '../utils/dom';
 
 export default {
   components: {
@@ -12,6 +13,23 @@ export default {
       default: '/',
     },
   },
+  computed: {
+    isRoot() {
+      return this.path === '/';
+    },
+  },
+  watch: {
+    isRoot: {
+      immediate: true,
+      handler: 'updateElements',
+    },
+  },
+  methods: {
+    updateElements(isRoot) {
+      updateElementsVisibility('.js-show-on-root', isRoot);
+      updateElementsVisibility('.js-hide-on-root', !isRoot);
+    },
+  },
 };
 </script>
 
diff --git a/app/assets/javascripts/repository/utils/dom.js b/app/assets/javascripts/repository/utils/dom.js
new file mode 100644
index 00000000000..963e6fc0bc4
--- /dev/null
+++ b/app/assets/javascripts/repository/utils/dom.js
@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/prefer-default-export
+export const updateElementsVisibility = (selector, isVisible) => {
+  document.querySelectorAll(selector).forEach(elem => elem.classList.toggle('hidden', !isVisible));
+};
diff --git a/app/assets/javascripts/repository/utils/title.js b/app/assets/javascripts/repository/utils/title.js
index 87d54c01200..ff16fbdd420 100644
--- a/app/assets/javascripts/repository/utils/title.js
+++ b/app/assets/javascripts/repository/utils/title.js
@@ -1,10 +1,14 @@
+const DEFAULT_TITLE = '· GitLab';
 // eslint-disable-next-line import/prefer-default-export
 export const setTitle = (pathMatch, ref, project) => {
-  if (!pathMatch) return;
+  if (!pathMatch) {
+    document.title = `${project} ${DEFAULT_TITLE}`;
+    return;
+  }
 
   const path = pathMatch.replace(/^\//, '');
   const isEmpty = path === '';
 
   /* eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings */
-  document.title = `${isEmpty ? 'Files' : path} · ${ref} · ${project}`;
+  document.title = `${isEmpty ? 'Files' : path} · ${ref} · ${project} ${DEFAULT_TITLE}`;
 };