Add support for timeframe range and discussion

- Adds support for showing timeframe
via slots to use with epics.
- Show discussions count when present.

app/assets/javascripts/issuable_list/components/issuable_item.vue

@@ -84,6 +84,14 @@ export default {
       }
       return {};
     },
+    showDiscussions() {
+      return typeof this.issuable.userDiscussionsCount === 'number';
+    },
+    showIssuableMeta() {
+      return Boolean(
+        this.hasSlotContents('status') || this.showDiscussions || this.issuable.assignees,
+      );
+    },
   },
   methods: {
     hasSlotContents(slotName) {
@@ -166,6 +174,7 @@ export default {
                 <span class="author">{{ author.name }}</span>
               </gl-link>
             </span>
+            <slot name="timeframe"></slot>
             &nbsp;
             <gl-label
               v-for="(label, index) in labels"
@@ -181,10 +190,26 @@ export default {
           </div>
         </div>
         <div class="issuable-meta">
-          <ul v-if="hasSlotContents('status') || issuable.assignees" class="controls">
+          <ul v-if="showIssuableMeta" class="controls">
             <li v-if="hasSlotContents('status')" class="issuable-status">
               <slot name="status"></slot>
             </li>
+            <li
+              v-if="showDiscussions"
+              data-testid="issuable-discussions"
+              class="issuable-comments gl-display-none gl-display-sm-block"
+            >
+              <gl-link
+                v-gl-tooltip:tooltipcontainer.top
+                :title="__('Comments')"
+                :href="`${issuable.webUrl}#notes`"
+                :class="{ 'no-comments': !issuable.userDiscussionsCount }"
+                class="gl-reset-color!"
+              >
+                <gl-icon name="comments" />
+                {{ issuable.userDiscussionsCount }}
+              </gl-link>
+            </li>
             <li v-if="assignees.length" class="gl-display-flex">
               <issuable-assignees
                 :assignees="issuable.assignees"

app/assets/javascripts/issuable_list/components/issuable_list_root.vue

@@ -269,6 +269,9 @@ export default {
           <template #author>
             <slot name="author" :author="issuable.author"></slot>
           </template>
+          <template #timeframe>
+            <slot name="timeframe" :issuable="issuable"></slot>
+          </template>
           <template #status>
             <slot name="status" :issuable="issuable"></slot>
           </template>

spec/frontend/issuable_list/components/issuable_item_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlLink, GlLabel, GlFormCheckbox } from '@gitlab/ui';
+import { GlLink, GlLabel, GlIcon, GlFormCheckbox } from '@gitlab/ui';
 
 import IssuableItem from '~/issuable_list/components/issuable_item.vue';
 import IssuableAssignees from '~/vue_shared/components/issue/issue_assignees.vue';
@@ -12,6 +12,7 @@ const createComponent = ({ issuableSymbol = '#', issuable = mockIssuable, slots
       issuableSymbol,
       issuable,
       enableLabelPermalinks: true,
+      showDiscussions: true,
       showCheckbox: false,
     },
     slots,
@@ -142,6 +143,31 @@ describe('IssuableItem', () => {
         expect(wrapper.vm.updatedAt).toContain('ago');
       });
     });
+
+    describe('showDiscussions', () => {
+      it.each`
+        userDiscussionsCount | returnValue
+        ${0}                 | ${true}
+        ${1}                 | ${true}
+        ${undefined}         | ${false}
+        ${null}              | ${false}
+      `(
+        'returns $returnValue when issuable.userDiscussionsCount is $userDiscussionsCount',
+        ({ userDiscussionsCount, returnValue }) => {
+          const wrapperWithDiscussions = createComponent({
+            issuableSymbol: '#',
+            issuable: {
+              ...mockIssuable,
+              userDiscussionsCount,
+            },
+          });
+
+          expect(wrapperWithDiscussions.vm.showDiscussions).toBe(returnValue);
+
+          wrapperWithDiscussions.destroy();
+        },
+      );
+    });
   });
 
   describe('methods', () => {
@@ -299,6 +325,24 @@ describe('IssuableItem', () => {
       wrapperWithAuthorSlot.destroy();
     });
 
+    it('renders timeframe via slot', () => {
+      const wrapperWithTimeframeSlot = createComponent({
+        issuableSymbol: '#',
+        issuable: mockIssuable,
+        slots: {
+          timeframe: `
+            <b class="js-timeframe">Jan 1, 2020 - Mar 31, 2020</b>
+          `,
+        },
+      });
+      const timeframeEl = wrapperWithTimeframeSlot.find('.js-timeframe');
+
+      expect(timeframeEl.exists()).toBe(true);
+      expect(timeframeEl.text()).toBe('Jan 1, 2020 - Mar 31, 2020');
+
+      wrapperWithTimeframeSlot.destroy();
+    });
+
     it('renders gl-label component for each label present within `issuable` prop', () => {
       const labelsEl = wrapper.findAll(GlLabel);
 
@@ -332,6 +376,18 @@ describe('IssuableItem', () => {
       wrapperWithStatusSlot.destroy();
     });
 
+    it('renders discussions count', () => {
+      const discussionsEl = wrapper.find('[data-testid="issuable-discussions"]');
+
+      expect(discussionsEl.exists()).toBe(true);
+      expect(discussionsEl.find(GlLink).attributes()).toMatchObject({
+        title: 'Comments',
+        href: `${mockIssuable.webUrl}#notes`,
+      });
+      expect(discussionsEl.find(GlIcon).props('name')).toBe('comments');
+      expect(discussionsEl.find(GlLink).text()).toContain('2');
+    });
+
     it('renders issuable-assignees component', () => {
       const assigneesEl = wrapper.find(IssuableAssignees);
 

spec/frontend/issuable_list/mock_data.js

@@ -52,6 +52,7 @@ export const mockIssuable = {
     nodes: mockLabels,
   },
   assignees: [mockAuthor],
+  userDiscussionsCount: 2,
 };
 
 export const mockIssuables = [