1 files changed, 48 insertions, 17 deletions

diff --git a/app/assets/javascripts/issuable_list/components/issuable_item.vue b/app/assets/javascripts/issuable_list/components/issuable_item.vue
index 39852eba71a..92c527c79ff 100644
--- a/app/assets/javascripts/issuable_list/components/issuable_item.vue
+++ b/app/assets/javascripts/issuable_list/components/issuable_item.vue
@@ -5,7 +5,7 @@ import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import { getTimeago } from '~/lib/utils/datetime_utility';
 import { isExternal, setUrlFragment } from '~/lib/utils/url_utility';
-import { __, sprintf } from '~/locale';
+import { __, n__, sprintf } from '~/locale';
 import IssuableAssignees from '~/vue_shared/components/issue/issue_assignees.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 
@@ -34,6 +34,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    labelFilterParam: {
+      type: String,
+      required: false,
+      default: 'label_name',
+    },
     showCheckbox: {
       type: Boolean,
       required: true,
@@ -81,8 +86,26 @@ export default {
       }
       return {};
     },
+    taskStatus() {
+      const { completedCount, count } = this.issuable.taskCompletionStatus || {};
+      if (!count) {
+        return undefined;
+      }
+
+      return sprintf(
+        n__(
+          '%{completedCount} of %{count} task completed',
+          '%{completedCount} of %{count} tasks completed',
+          count,
+        ),
+        { completedCount, count },
+      );
+    },
+    notesCount() {
+      return this.issuable.userDiscussionsCount ?? this.issuable.userNotesCount;
+    },
     showDiscussions() {
-      return typeof this.issuable.userDiscussionsCount === 'number';
+      return typeof this.notesCount === 'number';
     },
     showIssuableMeta() {
       return Boolean(
@@ -105,9 +128,8 @@ export default {
     },
     labelTarget(label) {
       if (this.enableLabelPermalinks) {
-        const key = encodeURIComponent('label_name[]');
         const value = encodeURIComponent(this.labelTitle(label));
-        return `?${key}=${value}`;
+        return `?${this.labelFilterParam}[]=${value}`;
       }
       return '#';
     },
@@ -144,19 +166,27 @@ export default {
               v-gl-tooltip
               name="eye-slash"
               :title="__('Confidential')"
+              :aria-label="__('Confidential')"
             />
             <gl-link :href="webUrl" v-bind="issuableTitleProps"
               >{{ issuable.title
               }}<gl-icon v-if="isIssuableUrlExternal" name="external-link" class="gl-ml-2"
             /></gl-link>
           </span>
+          <span
+            v-if="taskStatus"
+            class="task-status gl-display-none gl-sm-display-inline-block! gl-ml-3"
+            data-testid="task-status"
+          >
+            {{ taskStatus }}
+          </span>
         </div>
         <div class="issuable-info">
           <slot v-if="hasSlotContents('reference')" name="reference"></slot>
           <span v-else data-testid="issuable-reference" class="issuable-reference"
             >{{ issuableSymbol }}{{ issuable.iid }}</span
           >
-          <span class="issuable-authored d-none d-sm-inline-block">
+          <span class="issuable-authored gl-display-none gl-sm-display-inline-block! gl-mr-3">
             &middot;
             <span
               v-gl-tooltip:tooltipcontainer.bottom
@@ -199,6 +229,16 @@ export default {
           <li v-if="hasSlotContents('status')" class="issuable-status">
             <slot name="status"></slot>
           </li>
+          <li v-if="assignees.length" class="gl-display-flex">
+            <issuable-assignees
+              :assignees="assignees"
+              :icon-size="16"
+              :max-visible="4"
+              img-css-classes="gl-mr-2!"
+              class="gl-align-items-center gl-display-flex gl-ml-3"
+            />
+          </li>
+          <slot name="statistics"></slot>
           <li
             v-if="showDiscussions"
             data-testid="issuable-discussions"
@@ -208,26 +248,17 @@ export default {
               v-gl-tooltip:tooltipcontainer.top
               :title="__('Comments')"
               :href="issuableNotesLink"
-              :class="{ 'no-comments': !issuable.userDiscussionsCount }"
+              :class="{ 'no-comments': !notesCount }"
               class="gl-reset-color!"
             >
               <gl-icon name="comments" />
-              {{ issuable.userDiscussionsCount }}
+              {{ notesCount }}
             </gl-link>
           </li>
-          <li v-if="assignees.length" class="gl-display-flex">
-            <issuable-assignees
-              :assignees="issuable.assignees"
-              :icon-size="16"
-              :max-visible="4"
-              img-css-classes="gl-mr-2!"
-              class="gl-align-items-center gl-display-flex gl-ml-3"
-            />
-          </li>
         </ul>
         <div
           data-testid="issuable-updated-at"
-          class="float-right issuable-updated-at d-none d-sm-inline-block"
+          class="float-right issuable-updated-at gl-display-none gl-sm-display-inline-block"
         >
           <span
             v-gl-tooltip:tooltipcontainer.bottom