Epic Boards - Fix mentions of issues to epics

Rename IssueCount component to ItemCount
Make boards more agnostic about its issuableType

app/assets/javascripts/boards/components/board_list.vue

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import Draggable from 'vuedraggable';
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import { sortableStart, sortableEnd } from '~/boards/mixins/sortable_default_options';
 import { sprintf, __ } from '~/locale';
 import defaultSortableConfig from '~/sortable/sortable_config';
@@ -15,6 +15,7 @@ export default {
     loading: __('Loading'),
     loadingMoreboardItems: __('Loading more'),
     showingAllIssues: __('Showing all issues'),
+    showingAllEpics: __('Showing all epics'),
   },
   components: {
     BoardCard,
@@ -49,14 +50,19 @@ export default {
   },
   computed: {
     ...mapState(['pageInfoByListId', 'listsFlags']),
+    ...mapGetters(['isEpicBoard']),
+    listItemsCount() {
+      return this.isEpicBoard ? this.list.epicsCount : this.list.issuesCount;
+    },
     paginatedIssueText() {
-      return sprintf(__('Showing %{pageSize} of %{total} issues'), {
+      return sprintf(__('Showing %{pageSize} of %{total} %{issuableType}'), {
         pageSize: this.boardItems.length,
-        total: this.list.issuesCount,
+        total: this.listItemsCount,
+        issuableType: this.isEpicBoard ? 'epics' : 'issues',
       });
     },
     boardItemsSizeExceedsMax() {
-      return this.list.maxIssueCount > 0 && this.list.issuesCount > this.list.maxIssueCount;
+      return this.list.maxIssueCount > 0 && this.listItemsCount > this.list.maxIssueCount;
     },
     hasNextPage() {
       return this.pageInfoByListId[this.list.id].hasNextPage;
@@ -71,8 +77,13 @@ export default {
       // When  list is draggable, the reference to the list needs to be accessed differently
       return this.canAdminList ? this.$refs.list.$el : this.$refs.list;
     },
-    showingAllIssues() {
-      return this.boardItems.length === this.list.issuesCount;
+    showingAllItems() {
+      return this.boardItems.length === this.listItemsCount;
+    },
+    showingAllItemsText() {
+      return this.isEpicBoard
+        ? this.$options.i18n.showingAllEpics
+        : this.$options.i18n.showingAllIssues;
     },
     treeRootWrapper() {
       return this.canAdminList ? Draggable : 'ul';
@@ -235,7 +246,7 @@ export default {
           :label="$options.i18n.loadingMoreboardItems"
           data-testid="count-loading-icon"
         />
-        <span v-if="showingAllIssues">{{ $options.i18n.showingAllIssues }}</span>
+        <span v-if="showingAllItems">{{ showingAllItemsText }}</span>
         <span v-else>{{ paginatedIssueText }}</span>
       </li>
     </component>

app/assets/javascripts/boards/components/board_list_header.vue

@@ -17,7 +17,7 @@ import sidebarEventHub from '~/sidebar/event_hub';
 import AccessorUtilities from '../../lib/utils/accessor';
 import { inactiveId, LIST, ListType } from '../constants';
 import eventHub from '../eventhub';
-import IssueCount from './issue_count.vue';
+import ItemCount from './item_count.vue';
 
 export default {
   i18n: {
@@ -33,7 +33,7 @@ export default {
     GlTooltip,
     GlIcon,
     GlSprintf,
-    IssueCount,
+    ItemCount,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -337,7 +337,7 @@ export default {
           <gl-tooltip :target="() => $refs.itemCount" :title="itemsTooltipLabel" />
           <span ref="itemCount" class="issue-count-badge-count">
             <gl-icon class="gl-mr-2" :name="countIcon" />
-            <issue-count :issues-size="itemsCount" :max-issue-count="list.maxIssueCount" />
+            <item-count :items-size="itemsCount" :max-issue-count="list.maxIssueCount" />
           </span>
           <!-- EE start -->
           <template v-if="weightFeatureAvailable && !isEpicBoard">

app/assets/javascripts/boards/components/board_list_header_deprecated.vue

@@ -17,7 +17,7 @@ import AccessorUtilities from '../../lib/utils/accessor';
 import { inactiveId, LIST, ListType } from '../constants';
 import eventHub from '../eventhub';
 import boardsStore from '../stores/boards_store';
-import IssueCount from './issue_count.vue';
+import IssueCount from './item_count.vue';
 
 // This component is being replaced in favor of './board_list_header.vue' for GraphQL boards
 
@@ -308,7 +308,7 @@ export default {
           <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltipLabel" />
           <span ref="issueCount" class="issue-count-badge-count">
             <gl-icon class="gl-mr-2" name="issues" />
-            <issue-count :issues-size="issuesCount" :max-issue-count="list.maxIssueCount" />
+            <issue-count :items-size="issuesCount" :max-issue-count="list.maxIssueCount" />
           </span>
           <!-- The following is only true in EE. -->
           <template v-if="weightFeatureAvailable">

app/assets/javascripts/boards/components/issue_count.vue → app/assets/javascripts/boards/components/item_count.vue

@@ -7,7 +7,7 @@ export default {
       required: false,
       default: 0,
     },
-    issuesSize: {
+    itemsSize: {
       type: Number,
       required: false,
       default: 0,
@@ -18,16 +18,16 @@ export default {
       return this.maxIssueCount !== 0;
     },
     issuesExceedMax() {
-      return this.isMaxLimitSet && this.issuesSize > this.maxIssueCount;
+      return this.isMaxLimitSet && this.itemsSize > this.maxIssueCount;
     },
   },
 };
 </script>
 
 <template>
-  <div class="issue-count text-nowrap">
-    <span class="js-issue-size" :class="{ 'text-danger': issuesExceedMax }">
-      {{ issuesSize }}
+  <div class="item-count text-nowrap">
+    <span :class="{ 'text-danger': issuesExceedMax }" data-testid="board-items-count">
+      {{ itemsSize }}
     </span>
     <span v-if="isMaxLimitSet" class="js-max-issue-size">
       {{ maxIssueCount }}

ee/app/assets/javascripts/boards/boards_util.js

@@ -36,8 +36,7 @@ export function formatListEpics(listEpics) {
   let listItemsCount;
 
   const listData = listEpics.nodes.reduce((map, list) => {
-    // TODO update when list.epics.count is available: https://gitlab.com/gitlab-org/gitlab/-/issues/301017
-    listItemsCount = list.epics.edges.length;
+    listItemsCount = list.epicsCount;
     let sortedEpics = list.epics.edges.map((epicNode) => ({
       ...epicNode.node,
     }));

ee/spec/features/boards/boards_spec.rb

@@ -201,7 +201,7 @@ RSpec.describe 'issue boards', :js do
 
         it 'displays issue and max issue size' do
           page.within(find(".board:nth-child(2)")) do
-            expect(page.find('.js-issue-size')).to have_text(total_development_issues)
+            expect(page.find('[data-testid="board-items-count"]')).to have_text(total_development_issues)
             expect(page.find('.js-max-issue-size')).to have_text(max_issue_count)
           end
         end

ee/spec/frontend/boards/boards_util_spec.js

@@ -13,6 +13,7 @@ describe('formatListEpics', () => {
       nodes: [
         {
           id: 'gid://gitlab/Boards::EpicList/3',
+          epicsCount: 1,
           epics: {
             edges: [
               {

locale/gitlab.pot

@@ -27845,9 +27845,15 @@ msgstr[1] ""
 msgid "Showing %{limit} of %{total_count} issues. "
 msgstr ""
 
+msgid "Showing %{pageSize} of %{total} %{issuableType}"
+msgstr ""
+
 msgid "Showing %{pageSize} of %{total} issues"
 msgstr ""
 
+msgid "Showing all epics"
+msgstr ""
+
 msgid "Showing all issues"
 msgstr ""
 

spec/features/boards/boards_spec.rb

@@ -298,7 +298,7 @@ RSpec.describe 'Issue Boards', :js do
 
           it 'shows issue count on the list' do
             page.within(find(".board:nth-child(2)")) do
-              expect(page.find('.js-issue-size')).to have_text(total_planning_issues)
+              expect(page.find('[data-testid="board-items-count"]')).to have_text(total_planning_issues)
               expect(page).not_to have_selector('.js-max-issue-size')
             end
           end

spec/frontend/boards/components/issue_count_spec.js → spec/frontend/boards/components/item_count_spec.js

 import { shallowMount } from '@vue/test-utils';
-import IssueCount from '~/boards/components/issue_count.vue';
+import IssueCount from '~/boards/components/item_count.vue';
 
 describe('IssueCount', () => {
   let vm;
   let maxIssueCount;
-  let issuesSize;
+  let itemsSize;
 
   const createComponent = (props) => {
     vm = shallowMount(IssueCount, { propsData: props });
@@ -12,20 +12,20 @@ describe('IssueCount', () => {
 
   afterEach(() => {
     maxIssueCount = 0;
-    issuesSize = 0;
+    itemsSize = 0;
 
     if (vm) vm.destroy();
   });
 
   describe('when maxIssueCount is zero', () => {
     beforeEach(() => {
-      issuesSize = 3;
+      itemsSize = 3;
 
-      createComponent({ maxIssueCount: 0, issuesSize });
+      createComponent({ maxIssueCount: 0, itemsSize });
     });
 
     it('contains issueSize in the template', () => {
-      expect(vm.find('.js-issue-size').text()).toEqual(String(issuesSize));
+      expect(vm.find('[data-testid="board-items-count"]').text()).toEqual(String(itemsSize));
     });
 
     it('does not contains maxIssueCount in the template', () => {
@@ -36,9 +36,9 @@ describe('IssueCount', () => {
   describe('when maxIssueCount is greater than zero', () => {
     beforeEach(() => {
       maxIssueCount = 2;
-      issuesSize = 1;
+      itemsSize = 1;
 
-      createComponent({ maxIssueCount, issuesSize });
+      createComponent({ maxIssueCount, itemsSize });
     });
 
     afterEach(() => {
@@ -46,7 +46,7 @@ describe('IssueCount', () => {
     });
 
     it('contains issueSize in the template', () => {
-      expect(vm.find('.js-issue-size').text()).toEqual(String(issuesSize));
+      expect(vm.find('[data-testid="board-items-count"]').text()).toEqual(String(itemsSize));
     });
 
     it('contains maxIssueCount in the template', () => {
@@ -60,10 +60,10 @@ describe('IssueCount', () => {
 
   describe('when issueSize is greater than maxIssueCount', () => {
     beforeEach(() => {
-      issuesSize = 3;
+      itemsSize = 3;
       maxIssueCount = 2;
 
-      createComponent({ maxIssueCount, issuesSize });
+      createComponent({ maxIssueCount, itemsSize });
     });
 
     afterEach(() => {
@@ -71,7 +71,7 @@ describe('IssueCount', () => {
     });
 
     it('contains issueSize in the template', () => {
-      expect(vm.find('.js-issue-size').text()).toEqual(String(issuesSize));
+      expect(vm.find('[data-testid="board-items-count"]').text()).toEqual(String(itemsSize));
     });
 
     it('contains maxIssueCount in the template', () => {
@@ -79,7 +79,7 @@ describe('IssueCount', () => {
     });
 
     it('has text-danger class', () => {
-      expect(vm.find('.text-danger').text()).toEqual(String(issuesSize));
+      expect(vm.find('.text-danger').text()).toEqual(String(itemsSize));
     });
   });
 });