Stop showing task status if no tasks are present

Previously the task status would be visible even if there where no tasks
in the description. This fixes that by changing the regex to check for
tasks without 0.

This also fixes a bug where update the description inline would not
update the task status text on screen.

Closes #33880

app/assets/javascripts/issue_show/components/app.vue

@@ -51,6 +51,11 @@ export default {
       required: false,
       default: '',
     },
+    initialTaskStatus: {
+      type: String,
+      required: false,
+      default: '',
+    },
     updatedAt: {
       type: String,
       required: false,
@@ -105,6 +110,7 @@ export default {
       updatedAt: this.updatedAt,
       updatedByName: this.updatedByName,
       updatedByPath: this.updatedByPath,
+      taskStatus: this.initialTaskStatus,
     });
 
     return {

app/assets/javascripts/issue_show/components/description.vue

@@ -37,18 +37,7 @@
         });
       },
       taskStatus() {
-        const taskRegexMatches = this.taskStatus.match(/(\d+) of (\d+)/);
-        const $issuableHeader = $('.issuable-meta');
-        const $tasks = $('#task_status', $issuableHeader);
-        const $tasksShort = $('#task_status_short', $issuableHeader);
-
-        if (taskRegexMatches) {
-          $tasks.text(this.taskStatus);
-          $tasksShort.text(`${taskRegexMatches[1]}/${taskRegexMatches[2]} task${taskRegexMatches[2] > 1 ? 's' : ''}`);
-        } else {
-          $tasks.text('');
-          $tasksShort.text('');
-        }
+        this.updateTaskStatusText();
       },
     },
     methods: {
@@ -64,9 +53,24 @@
           });
         }
       },
+      updateTaskStatusText() {
+        const taskRegexMatches = this.taskStatus.match(/(\d+) of ((?!0)\d+)/);
+        const $issuableHeader = $('.issuable-meta');
+        const $tasks = $('#task_status', $issuableHeader);
+        const $tasksShort = $('#task_status_short', $issuableHeader);
+
+        if (taskRegexMatches) {
+          $tasks.text(this.taskStatus);
+          $tasksShort.text(`${taskRegexMatches[1]}/${taskRegexMatches[2]} task${taskRegexMatches[2] > 1 ? 's' : ''}`);
+        } else {
+          $tasks.text('');
+          $tasksShort.text('');
+        }
+      },
     },
     mounted() {
       this.renderGFM();
+      this.updateTaskStatusText();
     },
   };
 </script>

app/assets/javascripts/issue_show/index.js

@@ -45,6 +45,7 @@ document.addEventListener('DOMContentLoaded', () => {
           updatedAt: this.updatedAt,
           updatedByName: this.updatedByName,
           updatedByPath: this.updatedByPath,
+          initialTaskStatus: this.initialTaskStatus,
         },
       });
     },

app/assets/javascripts/issue_show/stores/index.js

 export default class Store {
-  constructor({
-    titleHtml,
-    titleText,
-    descriptionHtml,
-    descriptionText,
-    updatedAt,
-    updatedByName,
-    updatedByPath,
-  }) {
-    this.state = {
-      titleHtml,
-      titleText,
-      descriptionHtml,
-      descriptionText,
-      taskStatus: '',
-      updatedAt,
-      updatedByName,
-      updatedByPath,
-    };
+  constructor(initialState) {
+    this.state = initialState;
     this.formState = {
       title: '',
       confidential: false,

app/helpers/issuables_helper.rb

@@ -138,8 +138,8 @@ module IssuablesHelper
     end
 
     output << "&ensp;".html_safe
-    output << content_tag(:span, issuable.task_status, id: "task_status", class: "hidden-xs hidden-sm")
-    output << content_tag(:span, issuable.task_status_short, id: "task_status_short", class: "hidden-md hidden-lg")
+    output << content_tag(:span, (issuable.task_status if issuable.tasks?), id: "task_status", class: "hidden-xs hidden-sm")
+    output << content_tag(:span, (issuable.task_status_short if issuable.tasks?), id: "task_status_short", class: "hidden-md hidden-lg")
 
     output
   end
@@ -216,7 +216,8 @@ module IssuablesHelper
       initialTitleHtml: markdown_field(issuable, :title),
       initialTitleText: issuable.title,
       initialDescriptionHtml: markdown_field(issuable, :description),
-      initialDescriptionText: issuable.description
+      initialDescriptionText: issuable.description,
+      initialTaskStatus: issuable.task_status
     }
 
     data.merge!(updated_at_by(issuable))

spec/javascripts/issue_show/components/description_spec.js

@@ -95,6 +95,18 @@ describe('Description component', () => {
         done();
       });
     });
+
+    it('clears task status text when no tasks are present', (done) => {
+      vm.taskStatus = '0 of 0';
+
+      setTimeout(() => {
+        expect(
+          document.querySelector('.issuable-meta #task_status').textContent.trim(),
+        ).toBe('');
+
+        done();
+      });
+    });
   });
 
   it('applies syntax highlighting and math when description changed', (done) => {