update task_list n/n

app/assets/javascripts/issue_show/issue_title_description.vue

@@ -32,7 +32,9 @@ export default {
       timeoutId: null,
       title: '<span></span>',
       description: '<span></span>',
+      descriptionText: '',
       descriptionChange: false,
+      taskStatus: '',
     };
   },
   methods: {
@@ -40,46 +42,35 @@ export default {
       const body = JSON.parse(res.body);
       this.triggerAnimation(body);
     },
-    triggerAnimation(body) {
-      // always reset to false before checking the change
-      this.descriptionChange = false;
-
-      const { title, description } = body;
-
-      this.descriptionText = body.description_text;
-
-      /**
-      * since opacity is changed, even if there is no diff for Vue to update
-      * we must check the title/description even on a 304 to ensure no visual change
-      */
-      const noTitleChange = this.title === title;
-      const noDescriptionChange = this.description === description;
-
-      if (noTitleChange && noDescriptionChange) return;
-
-      const elementsToVisualize = [];
+    updateTaskHTML(body) {
+      this.taskStatus = body.task_status;
+      document.querySelector('#task_status').innerText = this.taskStatus;
+    },
+    elementsToVisualize(noTitleChange, noDescriptionChange) {
+      const elementStack = [];
 
       if (!noTitleChange) {
-        elementsToVisualize.push(this.$el.querySelector('.title'));
+        elementStack.push(this.$el.querySelector('.title'));
       }
 
       if (!noDescriptionChange) {
         // only change to true when we need to bind TaskLists the html of description
         this.descriptionChange = true;
-
-        elementsToVisualize.push(this.$el.querySelector('.wiki'));
+        elementStack.push(this.$el.querySelector('.wiki'));
       }
 
-      elementsToVisualize.forEach((element) => {
+      elementStack.forEach((element) => {
         element.classList.remove('issue-realtime-trigger-pulse');
         element.classList.add('issue-realtime-pre-pulse');
       });
 
+      return elementStack;
+    },
+    animate(title, description, elementsToVisualize) {
       this.timeoutId = setTimeout(() => {
         this.title = title;
-        document.querySelector('title').innerText = title;
-
         this.description = description;
+        document.querySelector('title').innerText = title;
 
         elementsToVisualize.forEach((element) => {
           element.classList.remove('issue-realtime-pre-pulse');
@@ -89,6 +80,29 @@ export default {
         clearTimeout(this.timeoutId);
       }, 0);
     },
+    triggerAnimation(body) {
+      // always reset to false before checking the change
+      this.descriptionChange = false;
+
+      const { title, description } = body;
+      this.descriptionText = body.description_text;
+      this.updateTaskHTML(body);
+      /**
+      * since opacity is changed, even if there is no diff for Vue to update
+      * we must check the title/description even on a 304 to ensure no visual change
+      */
+      const noTitleChange = this.title === title;
+      const noDescriptionChange = this.description === description;
+
+      if (noTitleChange && noDescriptionChange) return;
+
+      const elementsToVisualize = this.elementsToVisualize(
+        noTitleChange,
+        noDescriptionChange,
+      );
+
+      this.animate(title, description, elementsToVisualize);
+    },
   },
   computed: {
     descriptionClass() {
@@ -118,7 +132,6 @@ export default {
       });
 
       $(this.$refs['issue-content-container-gfm-entry']).renderGFM();
-
       return tl;
     }
     return null;

app/controllers/projects/issues_controller.rb

@@ -198,10 +198,12 @@ class Projects::IssuesController < Projects::ApplicationController
 
   def rendered_title
     Gitlab::PollingInterval.set_header(response, interval: 3_000)
+
     render json: {
       title: view_context.markdown_field(@issue, :title),
       description: view_context.markdown_field(@issue, :description),
       description_text: @issue.description,
+      task_status: @issue.task_status,
     }
   end