1
1
<script >
2
2
import { GlDropdown , GlDropdownItem , GlIcon , GlLoadingIcon , GlTooltipDirective } from ' @gitlab/ui' ;
3
- import { produce } from ' immer' ;
4
3
import { isEmpty } from ' lodash' ;
5
4
import { s__ } from ' ~/locale' ;
6
5
import { convertToGraphQLId , getIdFromGraphQLId } from ' ~/graphql_shared/utils' ;
@@ -18,6 +17,8 @@ import {
18
17
WORK_ITEM_STATUS_TEXT ,
19
18
} from ' ../../constants' ;
20
19
import getWorkItemLinksQuery from ' ../../graphql/work_item_links.query.graphql' ;
20
+ import addHierarchyChildMutation from ' ../../graphql/add_hierarchy_child.mutation.graphql' ;
21
+ import removeHierarchyChildMutation from ' ../../graphql/remove_hierarchy_child.mutation.graphql' ;
21
22
import updateWorkItemMutation from ' ../../graphql/update_work_item.mutation.graphql' ;
22
23
import workItemQuery from ' ../../graphql/work_item.query.graphql' ;
23
24
import workItemByIidQuery from ' ../../graphql/work_item_by_iid.query.graphql' ;
@@ -177,10 +178,6 @@ export default {
177
178
hideAddForm () {
178
179
this .isShownAddForm = false ;
179
180
},
180
- addChild (child ) {
181
- const { defaultClient: client } = this .$apollo .provider .clients ;
182
- this .toggleChildFromCache (child, child .id , client);
183
- },
184
181
openChild (child , e ) {
185
182
if (isMetaKey (e)) {
186
183
return ;
@@ -194,9 +191,8 @@ export default {
194
191
this .activeChild = {};
195
192
this .updateWorkItemIdUrlQuery ();
196
193
},
197
- handleWorkItemDeleted (childId ) {
198
- const { defaultClient: client } = this .$apollo .provider .clients ;
199
- this .toggleChildFromCache (null , childId, client);
194
+ handleWorkItemDeleted (child ) {
195
+ this .removeHierarchyChild (child);
200
196
this .activeToast = this .$toast .show (s__ (' WorkItem|Task deleted' ));
201
197
},
202
198
updateWorkItemIdUrlQuery ({ id, iid } = {}) {
@@ -205,38 +201,31 @@ export default {
205
201
: { work_item_id: getIdFromGraphQLId (id) };
206
202
updateHistory ({ url: setUrlParams (params), replace: true });
207
203
},
208
- toggleChildFromCache (workItem , childId , store ) {
209
- const sourceData = store .readQuery ({
210
- query: getWorkItemLinksQuery,
211
- variables: { id: this .issuableGid },
212
- });
213
-
214
- const newData = produce (sourceData, (draftState ) => {
215
- const widgetHierarchy = draftState .workItem .widgets .find (
216
- (widget ) => widget .type === WIDGET_TYPE_HIERARCHY ,
217
- );
218
-
219
- const index = widgetHierarchy .children .nodes .findIndex ((child ) => child .id === childId);
220
-
221
- if (index >= 0 ) {
222
- widgetHierarchy .children .nodes .splice (index, 1 );
223
- } else {
224
- widgetHierarchy .children .nodes .push (workItem);
225
- }
204
+ async addHierarchyChild (workItem ) {
205
+ return this .$apollo .mutate ({
206
+ mutation: addHierarchyChildMutation,
207
+ variables: { id: this .issuableGid , workItem },
226
208
});
227
-
228
- store . writeQuery ( {
229
- query : getWorkItemLinksQuery,
230
- variables : { id : this . issuableGid } ,
231
- data : newData ,
209
+ },
210
+ async removeHierarchyChild ( workItem ) {
211
+ return this . $apollo . mutate ({
212
+ mutation : removeHierarchyChildMutation ,
213
+ variables : { id : this . issuableGid , workItem } ,
232
214
});
233
215
},
234
216
async updateWorkItem (workItem , childId , parentId ) {
235
- return this .$apollo .mutate ({
217
+ const response = await this .$apollo .mutate ({
236
218
mutation: updateWorkItemMutation,
237
219
variables: { input: { id: childId, hierarchyWidget: { parentId } } },
238
- update : (store ) => this .toggleChildFromCache (workItem, childId, store),
239
220
});
221
+
222
+ if (parentId === null ) {
223
+ await this .removeHierarchyChild (workItem);
224
+ } else {
225
+ await this .addHierarchyChild (workItem);
226
+ }
227
+
228
+ return response;
240
229
},
241
230
async undoChildRemoval (workItem , childId ) {
242
231
const { data } = await this .updateWorkItem (workItem, childId, this .issuableGid );
@@ -246,7 +235,7 @@ export default {
246
235
}
247
236
},
248
237
async removeChild (childId ) {
249
- const { data } = await this .updateWorkItem (null , childId, null );
238
+ const { data } = await this .updateWorkItem ({ id : childId } , childId, null );
250
239
251
240
if (data .workItemUpdate .errors .length === 0 ) {
252
241
this .activeToast = this .$toast .show (s__ (' WorkItem|Child removed' ), {
@@ -365,7 +354,7 @@ export default {
365
354
: form- type= " formType"
366
355
: parent- work- item- type= " workItem.workItemType.name"
367
356
@cancel= " hideAddForm"
368
- @addWorkItemChild= " addChild "
357
+ @addWorkItemChild= " addHierarchyChild "
369
358
/ >
370
359
< work- item- link- child
371
360
v- for = " child in children"
@@ -384,7 +373,7 @@ export default {
384
373
: work- item- id= " activeChild.id"
385
374
: work- item- iid= " activeChild.iid"
386
375
@close= " closeModal"
387
- @workItemDeleted= " handleWorkItemDeleted(activeChild.id )"
376
+ @workItemDeleted= " handleWorkItemDeleted(activeChild)"
388
377
/ >
389
378
< / template>
390
379
< / template>
0 commit comments