Update document title when repository router changes

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);

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}`;
+};

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

spec/frontend/repository/utils/title_spec.js

@@ -0,0 +1,15 @@
+import { setTitle } from '~/repository/utils/title';
+
+describe('setTitle', () => {
+  it.each`
+    path                        | title
+    ${'/'}                      | ${'Files'}
+    ${'app'}                    | ${'app'}
+    ${'app/assets'}             | ${'app/assets'}
+    ${'app/assets/javascripts'} | ${'app/assets/javascripts'}
+  `('sets document title as $title for $path', ({ path, title }) => {
+    setTitle(path, 'master', 'GitLab');
+
+    expect(document.title).toEqual(`${title} · master · GitLab`);
+  });
+});