Update document title when repository router changes

3 files changed, 14 insertions, 3 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}`;
+};
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index 0edd8ee5e46..bb46b440c18 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -18,7 +18,7 @@
       = render 'stat_anchor_list', anchors: @project.statistics_buttons(show_auto_devops_callout: show_auto_devops_callout)
 
   - if vue_file_list
-    #js-tree-list{ data: { project_path: @project.full_path, ref: ref } }
+    #js-tree-list{ data: { project_path: @project.full_path, full_name: @project.name_with_namespace, ref: ref } }
     - if @tree.readme
       = render "projects/tree/readme", readme: @tree.readme
   - else