Boards refactor - Stop using ListIssue model

Remove ListIssue model from VueX state for GraphQL boards

app/assets/javascripts/boards/boards_util.js

 import { sortBy } from 'lodash';
-import ListIssue from 'ee_else_ce/boards/models/issue';
 import { ListType } from './constants';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import boardsStore from '~/boards/stores/boards_store';
@@ -21,11 +20,11 @@ export function formatBoardLists(lists) {
 }
 
 export function formatIssue(issue) {
-  return new ListIssue({
+  return {
     ...issue,
     labels: issue.labels?.nodes || [],
     assignees: issue.assignees?.nodes || [],
-  });
+  };
 }
 
 export function formatListIssues(listIssues) {
@@ -44,12 +43,12 @@ export function formatListIssues(listIssues) {
       [list.id]: sortedIssues.map(i => {
         const id = getIdFromGraphQLId(i.id);
 
-        const listIssue = new ListIssue({
+        const listIssue = {
           ...i,
           id,
           labels: i.labels?.nodes || [],
           assignees: i.assignees?.nodes || [],
-        });
+        };
 
         issues[id] = listIssue;
 
@@ -83,21 +82,30 @@ export function fullLabelId(label) {
 }
 
 export function moveIssueListHelper(issue, fromList, toList) {
-  if (toList.type === ListType.label) {
-    issue.addLabel(toList.label);
+  const updatedIssue = issue;
+  if (
+    toList.type === ListType.label &&
+    !updatedIssue.labels.find(label => label.id === toList.label.id)
+  ) {
+    updatedIssue.labels.push(toList.label);
   }
-  if (fromList && fromList.type === ListType.label) {
-    issue.removeLabel(fromList.label);
+  if (fromList?.label && fromList.type === ListType.label) {
+    updatedIssue.labels = updatedIssue.labels.filter(label => fromList.label.id !== label.id);
   }
 
-  if (toList.type === ListType.assignee) {
-    issue.addAssignee(toList.assignee);
+  if (
+    toList.type === ListType.assignee &&
+    !updatedIssue.assignees.find(assignee => assignee.id === toList.assignee.id)
+  ) {
+    updatedIssue.assignees.push(toList.assignee);
   }
-  if (fromList && fromList.type === ListType.assignee) {
-    issue.removeAssignee(fromList.assignee);
+  if (fromList?.assignee && fromList.type === ListType.assignee) {
+    updatedIssue.assignees = updatedIssue.assignees.filter(
+      assignee => assignee.id !== fromList.assignee.id,
+    );
   }
 
-  return issue;
+  return updatedIssue;
 }
 
 export default {

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

@@ -158,9 +158,13 @@ export default {
           class="confidential-icon gl-mr-2"
           :aria-label="__('Confidential')"
         />
-        <a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>{{
-          issue.title
-        }}</a>
+        <a
+          :href="issue.path || issue.webUrl || ''"
+          :title="issue.title"
+          class="js-no-trigger"
+          @mousemove.stop
+          >{{ issue.title }}</a
+        >
       </h4>
     </div>
     <div v-if="showLabelFooter" class="board-card-labels gl-mt-2 gl-display-flex gl-flex-wrap">
@@ -196,7 +200,11 @@ export default {
           #{{ issue.iid }}
         </span>
         <span class="board-info-items gl-mt-3 gl-display-inline-block">
-          <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" :closed="issue.closed" />
+          <issue-due-date
+            v-if="issue.dueDate"
+            :date="issue.dueDate"
+            :closed="issue.closed || Boolean(issue.closedAt)"
+          />
           <issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" />
           <issue-card-weight
             v-if="validIssueWeight"

ee/spec/frontend/boards/mock_data.js

-/* global ListIssue */
 /* global List */
 
 import Vue from 'vue';
 import '~/boards/models/list';
-import '~/boards/models/issue';
 
 export const mockLists = [
   {
@@ -95,7 +93,7 @@ export const rawIssue = {
 };
 
 export const mockIssue = {
-  id: 'gid://gitlab/Issue/436',
+  id: '436',
   iid: 27,
   title: 'Issue 1',
   referencePath: '#27',
@@ -111,10 +109,8 @@ export const mockIssue = {
   },
 };
 
-export const mockIssueWithModel = new ListIssue({ ...mockIssue, id: '436' });
-
 export const mockIssue2 = {
-  id: 'gid://gitlab/Issue/437',
+  id: '437',
   iid: 28,
   title: 'Issue 2',
   referencePath: '#28',
@@ -130,8 +126,6 @@ export const mockIssue2 = {
   },
 };
 
-export const mockIssue2WithModel = new ListIssue({ ...mockIssue2, id: '437' });
-
 export const mockIssue3 = {
   id: 'gid://gitlab/Issue/438',
   iid: 29,

ee/spec/frontend/boards/stores/actions_spec.js

@@ -14,10 +14,9 @@ import { mergeUrlParams, removeParams } from '~/lib/utils/url_utility';
 import {
   mockLists,
   mockIssue,
+  mockIssue2,
   mockEpic,
   rawIssue,
-  mockIssueWithModel,
-  mockIssue2WithModel,
   mockListsWithModel,
 } from '../mock_data';
 
@@ -635,8 +634,8 @@ describe('moveIssue', () => {
   };
 
   const issues = {
-    '436': mockIssueWithModel,
-    '437': mockIssue2WithModel,
+    '436': mockIssue,
+    '437': mockIssue2,
   };
 
   const state = {
@@ -673,7 +672,7 @@ describe('moveIssue', () => {
         {
           type: types.MOVE_ISSUE,
           payload: {
-            originalIssue: mockIssueWithModel,
+            originalIssue: mockIssue,
             fromListId: 'gid://gitlab/List/1',
             toListId: 'gid://gitlab/List/2',
             epicId,
@@ -714,7 +713,7 @@ describe('moveIssue', () => {
         {
           type: types.MOVE_ISSUE,
           payload: {
-            originalIssue: mockIssueWithModel,
+            originalIssue: mockIssue,
             fromListId: 'gid://gitlab/List/1',
             toListId: 'gid://gitlab/List/2',
             epicId,
@@ -723,7 +722,7 @@ describe('moveIssue', () => {
         {
           type: types.MOVE_ISSUE_FAILURE,
           payload: {
-            originalIssue: mockIssueWithModel,
+            originalIssue: mockIssue,
             fromListId: 'gid://gitlab/List/1',
             toListId: 'gid://gitlab/List/2',
             originalIndex: 0,

ee/spec/frontend/boards/stores/mutations_spec.js

 import mutations from 'ee/boards/stores/mutations';
-import {
-  mockIssue,
-  mockIssue2,
-  mockEpics,
-  mockEpic,
-  mockListsWithModel,
-  mockIssueWithModel,
-  mockIssue2WithModel,
-} from '../mock_data';
+import { mockIssue, mockIssue2, mockEpics, mockEpic, mockListsWithModel } from '../mock_data';
 
 const expectNotImplemented = action => {
   it('is not implemented', () => {
@@ -280,13 +272,13 @@ describe('RESET_EPICS', () => {
 describe('MOVE_ISSUE', () => {
   beforeEach(() => {
     const listIssues = {
-      'gid://gitlab/List/1': [mockListsWithModel.id, mockIssue2WithModel.id],
+      'gid://gitlab/List/1': [mockIssue.id, mockIssue2.id],
       'gid://gitlab/List/2': [],
     };
 
     const issues = {
-      '436': mockIssueWithModel,
-      '437': mockIssue2WithModel,
+      '436': mockIssue,
+      '437': mockIssue2,
     };
 
     state = {
@@ -300,15 +292,15 @@ describe('MOVE_ISSUE', () => {
     expect(state.issues['437'].epic.id).toEqual('gid://gitlab/Epic/40');
 
     mutations.MOVE_ISSUE(state, {
-      originalIssue: mockIssue2WithModel,
+      originalIssue: mockIssue2,
       fromListId: 'gid://gitlab/List/1',
       toListId: 'gid://gitlab/List/2',
       epicId,
     });
 
     const updatedListIssues = {
-      'gid://gitlab/List/1': [mockListsWithModel.id],
-      'gid://gitlab/List/2': [mockIssue2WithModel.id],
+      'gid://gitlab/List/1': [mockIssue.id],
+      'gid://gitlab/List/2': [mockIssue2.id],
     };
 
     expect(state.issuesByListId).toEqual(updatedListIssues);
@@ -319,15 +311,15 @@ describe('MOVE_ISSUE', () => {
     expect(state.issues['437'].epic.id).toEqual('gid://gitlab/Epic/40');
 
     mutations.MOVE_ISSUE(state, {
-      originalIssue: mockIssue2WithModel,
+      originalIssue: mockIssue2,
       fromListId: 'gid://gitlab/List/1',
       toListId: 'gid://gitlab/List/2',
       epicId: null,
     });
 
     const updatedListIssues = {
-      'gid://gitlab/List/1': [mockListsWithModel.id],
-      'gid://gitlab/List/2': [mockIssue2WithModel.id],
+      'gid://gitlab/List/1': [mockIssue.id],
+      'gid://gitlab/List/2': [mockIssue2.id],
     };
 
     expect(state.issuesByListId).toEqual(updatedListIssues);

spec/frontend/boards/board_list_new_spec.js

 /* global List */
-/* global ListIssue */
 
 import Vuex from 'vuex';
 import { useFakeRequestAnimationFrame } from 'helpers/fake_request_animation_frame';
@@ -7,7 +6,6 @@ import { createLocalVue, mount } from '@vue/test-utils';
 import eventHub from '~/boards/eventhub';
 import BoardList from '~/boards/components/board_list_new.vue';
 import BoardCard from '~/boards/components/board_card.vue';
-import '~/boards/models/issue';
 import '~/boards/models/list';
 import { listObj, mockIssuesByListId, issues, mockIssues } from './mock_data';
 import defaultState from '~/boards/stores/state';
@@ -52,7 +50,7 @@ const createComponent = ({
     ...listProps,
     doNotFetchIssues: true,
   });
-  const issue = new ListIssue({
+  const issue = {
     title: 'Testing',
     id: 1,
     iid: 1,
@@ -60,7 +58,7 @@ const createComponent = ({
     labels: [],
     assignees: [],
     ...listIssueProps,
-  });
+  };
   if (!Object.prototype.hasOwnProperty.call(listProps, 'issuesSize')) {
     list.issuesSize = 1;
   }

spec/frontend/boards/mock_data.js

-/* global ListIssue */
 /* global List */
 
 import Vue from 'vue';
 import { keyBy } from 'lodash';
 import '~/boards/models/list';
-import '~/boards/models/issue';
 import boardsStore from '~/boards/stores/boards_store';
 
 export const boardObj = {
@@ -184,8 +182,6 @@ export const mockActiveIssue = {
   emailsDisabled: false,
 };
 
-export const mockIssueWithModel = new ListIssue(mockIssue);
-
 export const mockIssue2 = {
   id: 'gid://gitlab/Issue/437',
   iid: 28,
@@ -203,8 +199,6 @@ export const mockIssue2 = {
   },
 };
 
-export const mockIssue2WithModel = new ListIssue(mockIssue2);
-
 export const mockIssue3 = {
   id: 'gid://gitlab/Issue/438',
   iid: 29,

spec/frontend/boards/stores/actions_spec.js

@@ -4,8 +4,7 @@ import {
   mockLists,
   mockListsById,
   mockIssue,
-  mockIssueWithModel,
-  mockIssue2WithModel,
+  mockIssue2,
   rawIssue,
   mockIssues,
   mockMilestone,
@@ -500,8 +499,8 @@ describe('moveIssue', () => {
   };
 
   const issues = {
-    '436': mockIssueWithModel,
-    '437': mockIssue2WithModel,
+    '436': mockIssue,
+    '437': mockIssue2,
   };
 
   const state = {
@@ -537,7 +536,7 @@ describe('moveIssue', () => {
         {
           type: types.MOVE_ISSUE,
           payload: {
-            originalIssue: mockIssueWithModel,
+            originalIssue: mockIssue,
             fromListId: 'gid://gitlab/List/1',
             toListId: 'gid://gitlab/List/2',
           },
@@ -612,7 +611,7 @@ describe('moveIssue', () => {
         {
           type: types.MOVE_ISSUE,
           payload: {
-            originalIssue: mockIssueWithModel,
+            originalIssue: mockIssue,
             fromListId: 'gid://gitlab/List/1',
             toListId: 'gid://gitlab/List/2',
           },
@@ -620,7 +619,7 @@ describe('moveIssue', () => {
         {
           type: types.MOVE_ISSUE_FAILURE,
           payload: {
-            originalIssue: mockIssueWithModel,
+            originalIssue: mockIssue,
             fromListId: 'gid://gitlab/List/1',
             toListId: 'gid://gitlab/List/2',
             originalIndex: 0,

spec/frontend/boards/stores/mutations_spec.js

 import mutations from '~/boards/stores/mutations';
 import * as types from '~/boards/stores/mutation_types';
 import defaultState from '~/boards/stores/state';
-import {
-  mockListsWithModel,
-  mockLists,
-  rawIssue,
-  mockIssue,
-  mockIssue2,
-  mockIssueWithModel,
-  mockIssue2WithModel,
-} from '../mock_data';
+import { mockListsWithModel, mockLists, rawIssue, mockIssue, mockIssue2 } from '../mock_data';
 
 const expectNotImplemented = action => {
   it('is not implemented', () => {
@@ -355,8 +347,8 @@ describe('Board Store Mutations', () => {
       };
 
       const issues = {
-        '1': mockIssueWithModel,
-        '2': mockIssue2WithModel,
+        '1': mockIssue,
+        '2': mockIssue2,
       };
 
       state = {
@@ -367,7 +359,7 @@ describe('Board Store Mutations', () => {
       };
 
       mutations.MOVE_ISSUE(state, {
-        originalIssue: mockIssue2WithModel,
+        originalIssue: mockIssue2,
         fromListId: 'gid://gitlab/List/1',
         toListId: 'gid://gitlab/List/2',
       });
@@ -396,7 +388,7 @@ describe('Board Store Mutations', () => {
         issue: rawIssue,
       });
 
-      expect(state.issues).toEqual({ '436': { ...mockIssueWithModel, id: 436 } });
+      expect(state.issues).toEqual({ '436': { ...mockIssue, id: 436 } });
     });
   });