Boards - Remove List model from GraphQL boards

Review feedback

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

@@ -9,7 +9,7 @@ import {
   GlSprintf,
   GlTooltipDirective,
 } from '@gitlab/ui';
-import { n__, s__ } from '~/locale';
+import { n__, s__, __ } from '~/locale';
 import AccessorUtilities from '../../lib/utils/accessor';
 import IssueCount from './issue_count.vue';
 import eventHub from '../eventhub';
@@ -19,6 +19,12 @@ import { isScopedLabel } from '~/lib/utils/common_utils';
 import { isListDraggable } from '~/boards/boards_util';
 
 export default {
+  i18n: {
+    newIssue: __('New issue'),
+    listSettings: __('List settings'),
+    expand: s__('Boards|Expand'),
+    collapse: s__('Boards|Collapse'),
+  },
   components: {
     GlButtonGroup,
     GlButton,
@@ -97,7 +103,7 @@ export default {
       return n__(`%d issue`, `%d issues`, this.issuesCount);
     },
     chevronTooltip() {
-      return this.list.collapsed ? s__('Boards|Expand') : s__('Boards|Collapse');
+      return this.list.collapsed ? this.$options.i18n.expand : this.$options.i18n.collapse;
     },
     chevronIcon() {
       return this.list.collapsed ? 'chevron-down' : 'chevron-right';
@@ -329,8 +335,8 @@ export default {
           v-show="!list.collapsed"
           ref="newIssueBtn"
           v-gl-tooltip.hover
-          :aria-label="__('New issue')"
-          :title="__('New issue')"
+          :aria-label="$options.i18n.newIssue"
+          :title="$options.i18n.newIssue"
           class="issue-count-badge-add-button no-drag"
           icon="plus"
           @click="showNewIssueForm"
@@ -340,13 +346,13 @@ export default {
           v-if="isSettingsShown"
           ref="settingsBtn"
           v-gl-tooltip.hover
-          :aria-label="__('List settings')"
+          :aria-label="$options.i18n.listSettings"
           class="no-drag js-board-settings-button"
-          :title="__('List settings')"
+          :title="$options.i18n.listSettings"
           icon="settings"
           @click="openSidebarSettings"
         />
-        <gl-tooltip :target="() => $refs.settingsBtn">{{ __('List settings') }}</gl-tooltip>
+        <gl-tooltip :target="() => $refs.settingsBtn">{{ $options.i18n.listSettings }}</gl-tooltip>
       </gl-button-group>
     </h3>
   </header>

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

@@ -12,6 +12,11 @@ import { sprintf, __ } from '~/locale';
 
 export default {
   name: 'BoardList',
+  i18n: {
+    loadingIssues: __('Loading issues'),
+    loadingMoreissues: __('Loading more issues'),
+    showingAllIssues: __('Showing all issues'),
+  },
   components: {
     BoardCard,
     BoardNewIssue,
@@ -68,6 +73,9 @@ 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.issues.length === this.list.issuesCount;
+    },
     treeRootWrapper() {
       return this.canAdminList ? Draggable : 'ul';
     },
@@ -201,7 +209,7 @@ export default {
     <div
       v-if="loading"
       class="gl-mt-4 gl-text-center"
-      :aria-label="__('Loading issues')"
+      :aria-label="$options.i18n.loadingIssues"
       data-testid="board_list_loading"
     >
       <gl-loading-icon />
@@ -230,8 +238,8 @@ export default {
         :disabled="disabled"
       />
       <li v-if="showCount" class="board-list-count gl-text-center" data-issue-id="-1">
-        <gl-loading-icon v-if="loadingMore" label="Loading more issues" />
-        <span v-if="issues.length === list.issuesCount">{{ __('Showing all issues') }}</span>
+        <gl-loading-icon v-if="loadingMore" :label="$options.i18n.loadingMoreissues" />
+        <span v-if="showingAllIssues">{{ $options.i18n.showingAllIssues }}</span>
         <span v-else>{{ paginatedIssueText }}</span>
       </li>
     </component>

ee/spec/frontend/boards/components/board_list_header_new_spec.js

@@ -3,7 +3,7 @@ import Vuex from 'vuex';
 
 import BoardListHeader from 'ee/boards/components/board_list_header_new.vue';
 import getters from 'ee/boards/stores/getters';
-import { mockList2 } from 'jest/boards/mock_data';
+import { mockLabelList } from 'jest/boards/mock_data';
 import { ListType, inactiveId } from '~/boards/constants';
 import sidebarEventHub from '~/sidebar/event_hub';
 
@@ -37,7 +37,7 @@ describe('Board List Header Component', () => {
     const boardId = '1';
 
     const listMock = {
-      ...mockList2,
+      ...mockLabelList,
       listType,
       collapsed,
     };
@@ -109,7 +109,7 @@ describe('Board List Header Component', () => {
       });
 
       it('does not emit event when there is an active List', () => {
-        store.state.activeId = mockList2.id;
+        store.state.activeId = mockLabelList.id;
         createComponent({ listType: hasSettings[0] });
         wrapper.vm.openSidebarSettings();
 

locale/gitlab.pot

@@ -16507,6 +16507,9 @@ msgstr ""
 msgid "Loading issues"
 msgstr ""
 
+msgid "Loading more issues"
+msgstr ""
+
 msgid "Loading snippet"
 msgstr ""
 

spec/frontend/boards/components/board_list_header_new_spec.js

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 
-import { mockList2 } from 'jest/boards/mock_data';
+import { mockLabelList } from 'jest/boards/mock_data';
 import BoardListHeader from '~/boards/components/board_list_header_new.vue';
 import { ListType } from '~/boards/constants';
 
@@ -31,7 +31,7 @@ describe('Board List Header Component', () => {
     const boardId = '1';
 
     const listMock = {
-      ...mockList2,
+      ...mockLabelList,
       listType,
       collapsed,
     };

spec/frontend/boards/mock_data.js

@@ -295,7 +295,7 @@ export const mockList = {
   issuesCount: 1,
 };
 
-export const mockList2 = {
+export const mockLabelList = {
   id: 'gid://gitlab/List/2',
   title: 'To Do',
   position: 0,
@@ -314,7 +314,7 @@ export const mockList2 = {
   issuesCount: 0,
 };
 
-export const mockLists = [mockList, mockList2];
+export const mockLists = [mockList, mockLabelList];
 
 export const mockListsById = keyBy(mockLists, 'id');