1 files changed, 28 insertions, 4 deletions
diff --git a/app/assets/javascripts/issuable_show/components/issuable_header.vue b/app/assets/javascripts/issuable_show/components/issuable_header.vue
index de17f7e7f6b..d7da533d055 100644
--- a/app/assets/javascripts/issuable_show/components/issuable_header.vue
+++ b/app/assets/javascripts/issuable_show/components/issuable_header.vue
@@ -3,6 +3,7 @@ import { GlIcon, GlButton, GlTooltipDirective, GlAvatarLink, GlAvatarLabeled } f
 
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { isExternal } from '~/lib/utils/url_utility';
+import { n__, sprintf } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
@@ -45,6 +46,11 @@ export default {
       required: false,
       default: false,
     },
+    taskCompletionStatus: {
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     authorId() {
@@ -53,6 +59,18 @@ export default {
     isAuthorExternal() {
       return isExternal(this.author.webUrl);
     },
+    taskStatusString() {
+      const { count, completedCount } = this.taskCompletionStatus;
+
+      return sprintf(
+        n__(
+          '%{completedCount} of %{count} task completed',
+          '%{completedCount} of %{count} tasks completed',
+          count,
+        ),
+        { completedCount, count },
+      );
+    },
   },
   mounted() {
     this.toggleSidebarButtonEl = document.querySelector('.js-toggle-right-sidebar-button');
@@ -74,8 +92,8 @@ export default {
         <gl-icon v-if="statusIcon" :name="statusIcon" class="d-block d-sm-none" />
         <span class="d-none d-sm-block"><slot name="status-badge"></slot></span>
       </div>
-      <div class="issuable-meta gl-display-flex gl-align-items-center">
-        <div class="gl-display-inline-block">
+      <div class="issuable-meta gl-display-flex gl-align-items-center d-md-inline-block">
+        <div v-if="blocked || confidential" class="gl-display-inline-block">
           <div v-if="blocked" data-testid="blocked" class="issuable-warning-icon inline">
             <gl-icon name="lock" :aria-label="__('Blocked')" />
           </div>
@@ -95,13 +113,13 @@ export default {
           :data-name="author.name"
           :href="author.webUrl"
           target="_blank"
-          class="js-user-link gl-ml-2"
+          class="js-user-link gl-vertical-align-middle gl-ml-2"
         >
           <gl-avatar-labeled
             :size="24"
             :src="author.avatarUrl"
             :label="author.name"
-            class="d-none d-sm-inline-flex gl-ml-1"
+            class="d-none d-sm-inline-flex gl-mx-1"
           >
             <template #meta>
               <gl-icon v-if="isAuthorExternal" name="external-link" />
@@ -109,6 +127,12 @@ export default {
           </gl-avatar-labeled>
           <strong class="author d-sm-none d-inline">@{{ author.username }}</strong>
         </gl-avatar-link>
+        <span
+          v-if="taskCompletionStatus"
+          data-testid="task-status"
+          class="gl-display-none gl-md-display-block gl-lg-display-inline-block"
+          >{{ taskStatusString }}</span
+        >
       </div>
       <gl-button
         data-testid="sidebar-toggle"