make tab title legit

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

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
 

spec/javascripts/issue_show/issue_title_description_spec.js

@@ -13,7 +13,9 @@ const issueShowInterceptor = (request, next) => {
   }));
 };
 
-describe('Issue Title', () => {
+fdescribe('Issue Title', () => {
+  document.body.innerHTML = '<span id="task_status"></span>';
+
   const comps = {
     IssueTitleComponent: {},
   };
@@ -40,7 +42,7 @@ describe('Issue Title', () => {
     // need setTimeout because actual setTimeout in code :P
     setTimeout(() => {
       expect(document.querySelector('title').innerText)
-        .toContain('this is a title');
+        .toContain('this is a title (#1)');
 
       expect(issueShowComponent.$el.querySelector('.title').innerHTML)
         .toContain('<p>this is a title</p>');

spec/javascripts/issue_show/mock_data.js

@@ -1,5 +1,8 @@
 export default {
   title: '<p>this is a title</p>',
+  title_text: 'this is a title',
   description: '<p>this is a description!</p>',
   description_text: 'this is a description',
+  issue_number: 1,
+  task_status: '2/4 completed',
 };