diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index 298f87b6d22..1f594e0d5ea 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -56,19 +56,25 @@
});
},
taskStatus() {
- const $issueableHeader = $('.issuable-header');
+ const taskRegexMatches = this.taskStatus.match(/(\d+) of (\d+)/);
+ const $issueableHeader = $('.issuable-meta');
let $tasks = $('#task_status');
let $tasksShort = $('#task_status_short');
- if (this.taskStatus.indexOf('0 of 0') >= 0) {
+ if (this.taskStatus.indexOf('0 of 0') >= 0 || this.taskStatus.trim() === '') {
$tasks.remove();
$tasksShort.remove();
} else if (!$tasks.length && !$tasksShort.length) {
- $tasks = $issueableHeader.append('');
- $tasksShort = $issueableHeader.append('');
+ $tasks = $issueableHeader.append('')
+ .find('#task_status');
+ $tasksShort = $issueableHeader.append('')
+ .find('#task_status_short');
}
- $tasks.text(this.taskStatus);
+ if (taskRegexMatches) {
+ $tasks.text(this.taskStatus);
+ $tasksShort.text(`${taskRegexMatches[1]}/${taskRegexMatches[2]} task${taskRegexMatches[2] > 1 ? 's' : ''}`);
+ }
},
},
};