Update document title when repository router changes

2 files changed, 13 insertions, 2 deletions

diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index 00b69362312..a5c125c2ff7 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -2,10 +2,12 @@ import Vue from 'vue';
 import createRouter from './router';
 import App from './components/app.vue';
 import apolloProvider from './graphql';
+import { setTitle } from './utils/title';
 
 export default function setupVueRepositoryList() {
   const el = document.getElementById('js-tree-list');
-  const { projectPath, ref } = el.dataset;
+  const { projectPath, ref, fullName } = el.dataset;
+  const router = createRouter(projectPath, ref);
 
   apolloProvider.clients.defaultClient.cache.writeData({
     data: {
@@ -14,9 +16,11 @@ export default function setupVueRepositoryList() {
     },
   });
 
+  router.afterEach(({ params: { pathMatch } }) => setTitle(pathMatch, ref, fullName));
+
   return new Vue({
     el,
-    router: createRouter(projectPath, ref),
+    router,
     apolloProvider,
     render(h) {
       return h(App);
diff --git a/app/assets/javascripts/repository/utils/title.js b/app/assets/javascripts/repository/utils/title.js
new file mode 100644
index 00000000000..3c3e918c0a8
--- /dev/null
+++ b/app/assets/javascripts/repository/utils/title.js
@@ -0,0 +1,7 @@
+// eslint-disable-next-line import/prefer-default-export
+export const setTitle = (pathMatch, ref, project) => {
+  const path = pathMatch.replace(/^\//, '');
+  const isEmpty = path === '';
+
+  document.title = `${isEmpty ? 'Files' : path} · ${ref} · ${project}`;
+};