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

4 files changed, 25 insertions, 31 deletions

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index e14414d3f68..8473a81bc88 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/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 {
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index bb95ff0101b..43db66c8e08 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/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>
diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index 14b2a1e18e9..ad8cb6465e2 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/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,
         },
       });
     },
diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js
index 27c2d349f52..f2b822f3cbb 100644
--- a/app/assets/javascripts/issue_show/stores/index.js
+++ b/app/assets/javascripts/issue_show/stores/index.js
@@ -1,23 +1,6 @@
 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,