Merge branch 'consolidate-board-item-ids' into 'master'

Consolidate the use of IDs in board state [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!69733

app/assets/javascripts/boards/boards_util.js

 import { sortBy, cloneDeep } from 'lodash';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { ListType, MilestoneIDs } from './constants';
 
 export function getMilestone() {
@@ -49,12 +48,10 @@ export function formatListIssues(listIssues) {
     return {
       ...map,
       [list.id]: sortedIssues.map((i) => {
-        const id = getIdFromGraphQLId(i.id);
+        const { id } = i;
 
         const listIssue = {
           ...i,
-          id,
-          fullId: i.id,
           labels: i.labels?.nodes || [],
           assignees: i.assignees?.nodes || [],
         };

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

@@ -96,7 +96,7 @@ export default {
       <template #header>
         <sidebar-todo-widget
           class="gl-mt-3"
-          :issuable-id="activeBoardItem.fullId"
+          :issuable-id="activeBoardItem.id"
           :issuable-iid="activeBoardItem.iid"
           :full-path="fullPath"
           :issuable-type="issuableType"

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

@@ -208,7 +208,7 @@ export default {
         newIndex = children.length;
       }
 
-      const getItemId = (el) => Number(el.dataset.itemId);
+      const getItemId = (el) => el.dataset.itemId;
 
       // If item is being moved within the same list
       if (from === to) {
@@ -234,7 +234,7 @@ export default {
       }
 
       this.moveItem({
-        itemId: Number(itemId),
+        itemId,
         itemIid,
         itemPath,
         fromListId: from.dataset.listId,

app/assets/javascripts/boards/stores/actions.js

@@ -574,8 +574,8 @@ export default {
           boardId: fullBoardId,
           fromListId: getIdFromGraphQLId(fromListId),
           toListId: getIdFromGraphQLId(toListId),
-          moveBeforeId,
-          moveAfterId,
+          moveBeforeId: moveBeforeId ? getIdFromGraphQLId(moveBeforeId) : undefined,
+          moveAfterId: moveAfterId ? getIdFromGraphQLId(moveAfterId) : undefined,
           // 'mutationVariables' allows EE code to pass in extra parameters.
           ...mutationVariables,
         },
@@ -642,7 +642,7 @@ export default {
         }
 
         const rawIssue = data.createIssue?.issue;
-        const formattedIssue = formatIssue({ ...rawIssue, id: getIdFromGraphQLId(rawIssue.id) });
+        const formattedIssue = formatIssue(rawIssue);
         dispatch('removeListItem', { listId: list.id, itemId: placeholderId });
         dispatch('addListItem', { list, item: formattedIssue, position: 0 });
       })
@@ -678,7 +678,7 @@ export default {
     }
 
     commit(types.UPDATE_BOARD_ITEM_BY_ID, {
-      itemId: getIdFromGraphQLId(data.updateIssue?.issue?.id) || activeBoardItem.id,
+      itemId: data.updateIssue?.issue?.id || activeBoardItem.id,
       prop: 'labels',
       value: data.updateIssue.issue.labels.nodes,
     });

app/assets/javascripts/boards/stores/getters.js

@@ -16,7 +16,7 @@ export default {
   },
 
   activeBoardItem: (state) => {
-    return state.boardItems[state.activeId] || { iid: '', id: '', fullId: '' };
+    return state.boardItems[state.activeId] || { iid: '', id: '' };
   },
 
   groupPathForActiveIssue: (_, getters) => {

app/assets/javascripts/boards/stores/mutations.js

 import { cloneDeep, pull, union } from 'lodash';
 import Vue from 'vue';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { s__, __ } from '~/locale';
 import { formatIssue } from '../boards_util';
 import { issuableTypes } from '../constants';
@@ -201,8 +200,7 @@ export default {
   },
 
   [mutationTypes.MUTATE_ISSUE_SUCCESS]: (state, { issue }) => {
-    const issueId = getIdFromGraphQLId(issue.id);
-    Vue.set(state.boardItems, issueId, formatIssue({ ...issue, id: issueId }));
+    Vue.set(state.boardItems, issue.id, formatIssue(issue));
   },
 
   [mutationTypes.ADD_BOARD_ITEM_TO_LIST]: (

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue

@@ -3,7 +3,6 @@ import { GlDropdownItem } from '@gitlab/ui';
 import { cloneDeep } from 'lodash';
 import Vue from 'vue';
 import createFlash from '~/flash';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { IssuableType } from '~/issue_show/constants';
 import { __, n__ } from '~/locale';
 import SidebarAssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue';
@@ -173,7 +172,7 @@ export default {
         })
         .then(({ data }) => {
           this.$emit('assignees-updated', {
-            id: getIdFromGraphQLId(data.issuableSetAssignees.issuable.id),
+            id: data.issuableSetAssignees.issuable.id,
             assignees: data.issuableSetAssignees.issuable.assignees.nodes,
           });
           return data;

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

 import { FiltersInfo as FiltersInfoCE } from '~/boards/boards_util';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { objectToQuery, queryToObject } from '~/lib/utils/url_utility';
 import {
   EPIC_LANE_BASE_HEIGHT,
@@ -61,12 +60,10 @@ export function formatListEpics(listEpics) {
     return {
       ...map,
       [list.id]: sortedEpics.map((i) => {
-        const id = getIdFromGraphQLId(i.id);
+        const { id } = i;
 
         const listEpic = {
           ...i,
-          id,
-          fullId: i.id,
           labels: i.labels?.nodes || [],
           assignees: i.assignees?.nodes || [],
         };

ee/app/assets/javascripts/boards/components/epic_board_content_sidebar.vue

@@ -64,7 +64,7 @@ export default {
       <template #header>
         <sidebar-todo-widget
           class="gl-mt-3"
-          :issuable-id="activeBoardItem.fullId"
+          :issuable-id="activeBoardItem.id"
           :issuable-iid="activeBoardItem.iid"
           :full-path="fullPath"
           :issuable-type="issuableType"

ee/app/assets/javascripts/boards/components/issues_lane_list.vue

@@ -151,7 +151,7 @@ export default {
       }
 
       this.moveIssue({
-        itemId: Number(itemId),
+        itemId,
         itemIid,
         itemPath,
         fromListId: from.dataset.listId,

ee/app/assets/javascripts/boards/stores/actions.js

@@ -11,12 +11,10 @@ import listsIssuesQuery from '~/boards/graphql/lists_issues.query.graphql';
 import projectBoardMembersQuery from '~/boards/graphql/project_board_members.query.graphql';
 import actionsCE, { gqlClient } from '~/boards/stores/actions';
 import * as typesCE from '~/boards/stores/mutation_types';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { historyPushState, convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { mergeUrlParams, removeParams, queryToObject } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import {
-  fullEpicId,
   fullEpicBoardId,
   formatEpic,
   formatListEpics,
@@ -384,12 +382,12 @@ export default {
       .mutate({
         mutation: epicMoveListMutation,
         variables: {
-          epicId: fullEpicId(itemId),
+          epicId: itemId,
           boardId: fullEpicBoardId(boardId),
           fromListId,
           toListId,
-          moveAfterId: moveAfterId ? fullEpicId(moveAfterId) : undefined,
-          moveBeforeId: moveBeforeId ? fullEpicId(moveBeforeId) : undefined,
+          moveBeforeId,
+          moveAfterId,
         },
       })
       .then(({ data }) => {
@@ -561,7 +559,7 @@ export default {
         }
 
         const rawEpic = data.createEpic?.epic;
-        const formattedEpic = formatEpic({ ...rawEpic, id: getIdFromGraphQLId(rawEpic.id) });
+        const formattedEpic = formatEpic(rawEpic);
         dispatch('removeListItem', { listId: list.id, itemId: placeholderId });
         dispatch('addListItem', { list, item: formattedEpic, position: 0 });
       })

ee/spec/frontend/boards/boards_util_spec.js

@@ -8,6 +8,7 @@ import setWindowLocation from 'helpers/set_window_location_helper';
 import { mockLabel } from './mock_data';
 
 const listId = 'gid://gitlab/Boards::EpicList/3';
+const epicId = 'gid://gitlab/Epic/1';
 
 describe('formatEpic', () => {
   it('formats raw epic object for state', () => {
@@ -19,7 +20,7 @@ describe('formatEpic', () => {
     ];
 
     const rawEpic = {
-      id: 1,
+      id: epicId,
       title: 'Foo',
       labels: {
         nodes: labels,
@@ -48,7 +49,7 @@ describe('formatListEpics', () => {
               {
                 node: {
                   title: 'epic title',
-                  id: 'gid://gitlab/Epic/1',
+                  id: epicId,
                   labels: {
                     nodes: [mockLabel],
                   },
@@ -64,15 +65,14 @@ describe('formatListEpics', () => {
 
     expect(result).toEqual({
       boardItems: {
-        1: {
+        [epicId]: {
           assignees: [],
-          id: 1,
-          fullId: 'gid://gitlab/Epic/1',
+          id: epicId,
           labels: [mockLabel],
           title: 'epic title',
         },
       },
-      listData: { [listId]: [1] },
+      listData: { [listId]: [epicId] },
       listItemsCount: 1,
     });
   });

ee/spec/frontend/boards/mock_data.js

@@ -147,8 +147,7 @@ export const mockIssueGroupPath = 'gitlab-org';
 export const mockIssueProjectPath = `${mockIssueGroupPath}/gitlab-test`;
 
 export const mockIssue = {
-  id: '436',
-  fullId: 'gid://gitlab/Issue/436',
+  id: 'gid://gitlab/Issue/436',
   iid: '27',
   title: 'Issue 1',
   referencePath: `${mockIssueProjectPath}#27`,
@@ -233,8 +232,7 @@ export const mockEpic = {
 };
 
 export const mockFormattedBoardEpic = {
-  fullId: 'gid://gitlab/Epic/41',
-  id: 41,
+  id: 'gid://gitlab/Epic/41',
   iid: '1',
   title: 'Epic title',
   referencePath: 'gitlab-org/gitlab-subgroup&41',

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

@@ -14,7 +14,6 @@ import { mockMoveIssueParams, mockMoveData, mockMoveState } from 'jest/boards/mo
 import { formatListIssues } from '~/boards/boards_util';
 import listsIssuesQuery from '~/boards/graphql/lists_issues.query.graphql';
 import * as typesCE from '~/boards/stores/mutation_types';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import * as commonUtils from '~/lib/utils/common_utils';
 import { mergeUrlParams, removeParams } from '~/lib/utils/url_utility';
 import {
@@ -1044,7 +1043,7 @@ describe('addListNewEpic', () => {
             type: 'addListItem',
             payload: {
               list: fakeList,
-              item: { ...mockEpic, id: getIdFromGraphQLId(mockEpic.id), assignees: [] },
+              item: { ...mockEpic, assignees: [] },
               position: 0,
             },
           },

spec/frontend/boards/mock_data.js

@@ -192,8 +192,7 @@ export const mockIssue = {
 
 export const mockActiveIssue = {
   ...mockIssue,
-  fullId: 'gid://gitlab/Issue/436',
-  id: 436,
+  id: 'gid://gitlab/Issue/436',
   iid: '27',
   subscribed: false,
   emailsDisabled: false,

spec/frontend/boards/stores/actions_spec.js

@@ -26,7 +26,6 @@ import issueCreateMutation from '~/boards/graphql/issue_create.mutation.graphql'
 import actions, { gqlClient } from '~/boards/stores/actions';
 import * as types from '~/boards/stores/mutation_types';
 import mutations from '~/boards/stores/mutations';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
 import {
   mockLists,
@@ -1213,8 +1212,8 @@ describe('updateMovedIssueCard', () => {
 
 describe('updateIssueOrder', () => {
   const issues = {
-    436: mockIssue,
-    437: mockIssue2,
+    [mockIssue.id]: mockIssue,
+    [mockIssue2.id]: mockIssue2,
   };
 
   const state = {
@@ -1223,7 +1222,7 @@ describe('updateIssueOrder', () => {
   };
 
   const moveData = {
-    itemId: 436,
+    itemId: mockIssue.id,
     fromListId: 'gid://gitlab/List/1',
     toListId: 'gid://gitlab/List/2',
   };
@@ -1482,7 +1481,7 @@ describe('addListNewIssue', () => {
             type: 'addListItem',
             payload: {
               list: fakeList,
-              item: formatIssue({ ...mockIssue, id: getIdFromGraphQLId(mockIssue.id) }),
+              item: formatIssue(mockIssue),
               position: 0,
             },
           },

spec/frontend/boards/stores/getters_spec.js

@@ -77,12 +77,12 @@ describe('Boards - Getters', () => {
   });
 
   describe('getBoardItemById', () => {
-    const state = { boardItems: { 1: 'issue' } };
+    const state = { boardItems: { 'gid://gitlab/Issue/1': 'issue' } };
 
     it.each`
-      id     | expected
-      ${'1'} | ${'issue'}
-      ${''}  | ${{}}
+      id                        | expected
+      ${'gid://gitlab/Issue/1'} | ${'issue'}
+      ${''}                     | ${{}}
     `('returns $expected when $id is passed to state', ({ id, expected }) => {
       expect(getters.getBoardItemById(state)(id)).toEqual(expected);
     });
@@ -90,11 +90,11 @@ describe('Boards - Getters', () => {
 
   describe('activeBoardItem', () => {
     it.each`
-      id     | expected
-      ${'1'} | ${'issue'}
-      ${''}  | ${{ id: '', iid: '', fullId: '' }}
+      id                        | expected
+      ${'gid://gitlab/Issue/1'} | ${'issue'}
+      ${''}                     | ${{ id: '', iid: '' }}
     `('returns $expected when $id is passed to state', ({ id, expected }) => {
-      const state = { boardItems: { 1: 'issue' }, activeId: id };
+      const state = { boardItems: { 'gid://gitlab/Issue/1': 'issue' }, activeId: id };
 
       expect(getters.activeBoardItem(state)).toEqual(expected);
     });

spec/frontend/boards/stores/mutations_spec.js

@@ -407,7 +407,7 @@ describe('Board Store Mutations', () => {
   describe('MUTATE_ISSUE_SUCCESS', () => {
     it('updates issue in issues state', () => {
       const issues = {
-        436: { id: rawIssue.id },
+        [rawIssue.id]: { id: rawIssue.id },
       };
 
       state = {
@@ -419,7 +419,7 @@ describe('Board Store Mutations', () => {
         issue: rawIssue,
       });
 
-      expect(state.boardItems).toEqual({ 436: { ...mockIssue, id: 436 } });
+      expect(state.boardItems).toEqual({ [mockIssue.id]: mockIssue });
     });
   });
 

spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js

@@ -206,7 +206,7 @@ describe('Sidebar assignees widget', () => {
                 status: null,
               },
             ],
-            id: 1,
+            id: 'gid://gitlab/Issue/1',
           },
         ],
       ]);