make tab title legit

2 files changed, 14 insertions, 2 deletions

diff --git a/app/assets/javascripts/issue_show/issue_title_description.vue b/app/assets/javascripts/issue_show/issue_title_description.vue
index e21667f2ac7..6fdf56fc938 100644
--- a/app/assets/javascripts/issue_show/issue_title_description.vue
+++ b/app/assets/javascripts/issue_show/issue_title_description.vue
@@ -31,6 +31,7 @@ export default {
       poll,
       timeoutId: null,
       title: '<span></span>',
+      titleText: '',
       description: '<span></span>',
       descriptionText: '',
       descriptionChange: false,
@@ -40,16 +41,18 @@ export default {
   methods: {
     renderResponse(res) {
       const data = JSON.parse(res.body);
+      this.issueIID = data.issue_number;
       this.triggerAnimation(data);
     },
     updateTaskHTML(data) {
       this.taskStatus = data.task_status;
       document.querySelector('#task_status').innerText = this.taskStatus;
     },
-    elementsToVisualize(noTitleChange, noDescriptionChange) {
+    elementsToVisualize(noTitleChange, noDescriptionChange, data) {
       const elementStack = [];
 
       if (!noTitleChange) {
+        this.titleText = data.title_text;
         elementStack.push(this.$el.querySelector('.title'));
       }
 
@@ -66,11 +69,17 @@ export default {
 
       return elementStack;
     },
+    setTabTitle() {
+      const currentTabTitle = document.querySelector('title');
+      const currentTabTitleScope = currentTabTitle.innerText.split('·');
+      currentTabTitleScope[0] = `${this.titleText} (#${this.issueIID}) `;
+      currentTabTitle.innerText = currentTabTitleScope.join('·');
+    },
     animate(title, description, elementsToVisualize) {
       this.timeoutId = setTimeout(() => {
         this.title = title;
         this.description = description;
-        document.querySelector('title').innerText = title;
+        this.setTabTitle();
 
         elementsToVisualize.forEach((element) => {
           element.classList.remove('issue-realtime-pre-pulse');
@@ -99,6 +108,7 @@ export default {
       const elementsToVisualize = this.elementsToVisualize(
         noTitleChange,
         noDescriptionChange,
+        data,
       );
 
       this.animate(title, description, elementsToVisualize);
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index e5c1505ece6..7932b92c005 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -201,9 +201,11 @@ class Projects::IssuesController < Projects::ApplicationController
 
     render json: {
       title: view_context.markdown_field(@issue, :title),
+      title_text: @issue.title,
       description: view_context.markdown_field(@issue, :description),
       description_text: @issue.description,
       task_status: @issue.task_status,
+      issue_number: @issue.iid,
     }
   end