Merge branch 'dm-json-page-title' into 'master'

Use backend-provided page title in repo editor

Closes #36029

See merge request gitlab-org/gitlab-ce!13763

app/assets/javascripts/repo/helpers/repo_helper.js

@@ -58,13 +58,13 @@ const RepoHelper = {
     return langs.find(lang => lang.extensions && lang.extensions.indexOf(`.${ext}`) > -1);
   },
 
-  setDirectoryOpen(tree) {
+  setDirectoryOpen(tree, title) {
     const file = tree;
     if (!file) return undefined;
 
     file.opened = true;
     file.icon = 'fa-folder-open';
-    RepoHelper.updateHistoryEntry(file.url, file.name);
+    RepoHelper.updateHistoryEntry(file.url, title);
     return file;
   },
 
@@ -135,6 +135,8 @@ const RepoHelper = {
     return Service.getContent()
     .then((response) => {
       const data = response.data;
+      if (response.headers && response.headers['page-title']) data.pageTitle = response.headers['page-title'];
+
       Store.isTree = RepoHelper.isTree(data);
       if (!Store.isTree) {
         if (!file) file = data;
@@ -168,7 +170,7 @@ const RepoHelper = {
       } else {
         // it's a tree
         if (!file) Store.isRoot = RepoHelper.isRoot(Service.url);
-        file = RepoHelper.setDirectoryOpen(file);
+        file = RepoHelper.setDirectoryOpen(file, data.pageTitle || data.name);
         const newDirectory = RepoHelper.dataToListOfFiles(data);
         Store.addFilesToDirectory(file, Store.files, newDirectory);
         Store.prevURL = Service.blobURLtoParentTree(Service.url);
@@ -255,7 +257,7 @@ const RepoHelper = {
     history.pushState({ key: RepoHelper.key }, '', url);
 
     if (title) {
-      document.title = `${title} · GitLab`;
+      document.title = title;
     }
   },
 

app/assets/javascripts/repo/stores/repo_store.js

@@ -83,7 +83,7 @@ const RepoStore = {
         }).catch(Helper.loadingError);
     }
 
-    if (!file.loading) Helper.updateHistoryEntry(file.url, file.name);
+    if (!file.loading) Helper.updateHistoryEntry(file.url, file.pageTitle || file.name);
     RepoStore.binary = file.binary;
   },
 

app/controllers/application_controller.rb

@@ -25,6 +25,8 @@ class ApplicationController < ActionController::Base
 
   around_action :set_locale
 
+  after_action :set_page_title_header, if: -> { request.format == :json }
+
   protect_from_forgery with: :exception
 
   helper_method :can?, :current_application_settings
@@ -335,4 +337,9 @@ class ApplicationController < ActionController::Base
       sign_in user, store: false
     end
   end
+
+  def set_page_title_header
+    # Per https://tools.ietf.org/html/rfc5987, headers need to be ISO-8859-1, not UTF-8
+    response.headers['Page-Title'] = page_title('GitLab').encode('ISO-8859-1')
+  end
 end

app/controllers/projects/blob_controller.rb

@@ -41,6 +41,8 @@ class Projects::BlobController < Projects::ApplicationController
       end
 
       format.json do
+        page_title @blob.path, @ref, @project.name_with_namespace
+
         show_json
       end
     end

app/controllers/projects/tree_controller.rb

@@ -35,6 +35,8 @@ class Projects::TreeController < Projects::ApplicationController
       end
 
       format.json do
+        page_title @path.presence || _("Files"), @ref, @project.name_with_namespace
+
         # n+1: https://gitlab.com/gitlab-org/gitlab-ce/issues/38261
         Gitlab::GitalyClient.allow_n_plus_1_calls do
           render json: TreeSerializer.new(project: @project, repository: @repository, ref: @ref).represent(@tree)

app/helpers/page_layout_helper.rb

@@ -9,7 +9,7 @@ module PageLayoutHelper
     end
 
     # Segments are seperated by middot
-    @page_title.join(" \u00b7 ")
+    @page_title.join(" · ")
   end
 
   # Define or get a description for the current page

spec/javascripts/repo/components/repo_file_spec.js

 import Vue from 'vue';
 import repoFile from '~/repo/components/repo_file.vue';
+import RepoStore from '~/repo/stores/repo_store';
 
 describe('RepoFile', () => {
   const updated = 'updated';
@@ -12,8 +13,13 @@ describe('RepoFile', () => {
     level: 10,
   };
   const activeFile = {
+    pageTitle: 'pageTitle',
     url: 'url',
   };
+  const otherFile = {
+    html: '<p class="file-content">html</p>',
+    pageTitle: 'otherpageTitle',
+  };
 
   function createComponent(propsData) {
     const RepoFile = Vue.extend(repoFile);
@@ -60,6 +66,12 @@ describe('RepoFile', () => {
     expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy();
   });
 
+  it('sets the document title correctly', () => {
+    RepoStore.setActiveFiles(otherFile);
+
+    expect(document.title.trim()).toEqual(otherFile.pageTitle);
+  });
+
   it('renders a spinner if the file is loading', () => {
     file.loading = true;
     const vm = createComponent({