Add latest changes from gitlab-org/gitlab@master

7 files changed, 161 insertions, 12 deletions

diff --git a/spec/frontend/work_items/components/work_item_description_spec.js b/spec/frontend/work_items/components/work_item_description_spec.js
index 4a9978bbadf..fafd129d356 100644
--- a/spec/frontend/work_items/components/work_item_description_spec.js
+++ b/spec/frontend/work_items/components/work_item_description_spec.js
@@ -12,10 +12,12 @@ import WorkItemDescription from '~/work_items/components/work_item_description.v
 import { TRACKING_CATEGORY_SHOW } from '~/work_items/constants';
 import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
 import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
+import workItemByIidQuery from '~/work_items/graphql/work_item_by_iid.query.graphql';
 import {
   updateWorkItemMutationResponse,
   workItemResponseFactory,
   workItemQueryResponse,
+  projectWorkItemResponse,
 } from '../mock_data';
 
 jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
@@ -29,6 +31,8 @@ describe('WorkItemDescription', () => {
   Vue.use(VueApollo);
 
   const mutationSuccessHandler = jest.fn().mockResolvedValue(updateWorkItemMutationResponse);
+  const workItemByIidResponseHandler = jest.fn().mockResolvedValue(projectWorkItemResponse);
+  let workItemResponseHandler;
 
   const findEditButton = () => wrapper.find('[data-testid="edit-description"]');
   const findMarkdownField = () => wrapper.findComponent(MarkdownField);
@@ -44,18 +48,24 @@ describe('WorkItemDescription', () => {
     canUpdate = true,
     workItemResponse = workItemResponseFactory({ canUpdate }),
     isEditing = false,
+    fetchByIid = false,
   } = {}) => {
-    const workItemResponseHandler = jest.fn().mockResolvedValue(workItemResponse);
+    workItemResponseHandler = jest.fn().mockResolvedValue(workItemResponse);
 
     const { id } = workItemQueryResponse.data.workItem;
     wrapper = shallowMount(WorkItemDescription, {
       apolloProvider: createMockApollo([
         [workItemQuery, workItemResponseHandler],
         [updateWorkItemMutation, mutationHandler],
+        [workItemByIidQuery, workItemByIidResponseHandler],
       ]),
       propsData: {
         workItemId: id,
         fullPath: 'test-project-path',
+        queryVariables: {
+          id: workItemId,
+        },
+        fetchByIid,
       },
       stubs: {
         MarkdownField,
@@ -242,4 +252,20 @@ describe('WorkItemDescription', () => {
       expect(updateDraft).toHaveBeenCalled();
     });
   });
+
+  it('calls the global ID work item query when `fetchByIid` prop is false', async () => {
+    createComponent({ fetchByIid: false });
+    await waitForPromises();
+
+    expect(workItemResponseHandler).toHaveBeenCalled();
+    expect(workItemByIidResponseHandler).not.toHaveBeenCalled();
+  });
+
+  it('calls the IID work item query when when `fetchByIid` prop is true', async () => {
+    createComponent({ fetchByIid: true });
+    await waitForPromises();
+
+    expect(workItemResponseHandler).not.toHaveBeenCalled();
+    expect(workItemByIidResponseHandler).toHaveBeenCalled();
+  });
 });
diff --git a/spec/frontend/work_items/components/work_item_detail_modal_spec.js b/spec/frontend/work_items/components/work_item_detail_modal_spec.js
index 6b1ef8971d3..4029e47c390 100644
--- a/spec/frontend/work_items/components/work_item_detail_modal_spec.js
+++ b/spec/frontend/work_items/components/work_item_detail_modal_spec.js
@@ -86,6 +86,7 @@ describe('WorkItemDetailModal component', () => {
       isModal: true,
       workItemId: defaultPropsData.workItemId,
       workItemParentId: defaultPropsData.issueGid,
+      iid: null,
     });
   });
 
diff --git a/spec/frontend/work_items/components/work_item_detail_spec.js b/spec/frontend/work_items/components/work_item_detail_spec.js
index 1e22fb42a83..6dbca7086cc 100644
--- a/spec/frontend/work_items/components/work_item_detail_spec.js
+++ b/spec/frontend/work_items/components/work_item_detail_spec.js
@@ -24,6 +24,7 @@ import WorkItemMilestone from '~/work_items/components/work_item_milestone.vue';
 import WorkItemInformation from '~/work_items/components/work_item_information.vue';
 import { i18n } from '~/work_items/constants';
 import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
+import workItemByIidQuery from '~/work_items/graphql/work_item_by_iid.query.graphql';
 import workItemDatesSubscription from '~/work_items/graphql/work_item_dates.subscription.graphql';
 import workItemTitleSubscription from '~/work_items/graphql/work_item_title.subscription.graphql';
 import workItemAssigneesSubscription from '~/work_items/graphql/work_item_assignees.subscription.graphql';
@@ -37,6 +38,7 @@ import {
   workItemResponseFactory,
   workItemTitleSubscriptionResponse,
   workItemAssigneesSubscriptionResponse,
+  projectWorkItemResponse,
 } from '../mock_data';
 
 describe('WorkItemDetail component', () => {
@@ -52,6 +54,7 @@ describe('WorkItemDetail component', () => {
     canDelete: true,
   });
   const successHandler = jest.fn().mockResolvedValue(workItemQueryResponse);
+  const successByIidHandler = jest.fn().mockResolvedValue(projectWorkItemResponse);
   const datesSubscriptionHandler = jest.fn().mockResolvedValue(workItemDatesSubscriptionResponse);
   const titleSubscriptionHandler = jest.fn().mockResolvedValue(workItemTitleSubscriptionResponse);
   const assigneesSubscriptionHandler = jest
@@ -87,12 +90,15 @@ describe('WorkItemDetail component', () => {
     error = undefined,
     includeWidgets = false,
     workItemsMvc2Enabled = false,
+    fetchByIid = false,
+    iidPathQueryParam = undefined,
   } = {}) => {
     const handlers = [
       [workItemQuery, handler],
       [workItemTitleSubscription, subscriptionHandler],
       [workItemDatesSubscription, datesSubscriptionHandler],
       [workItemAssigneesSubscription, assigneesSubscriptionHandler],
+      [workItemByIidQuery, successByIidHandler],
       confidentialityMock,
     ];
 
@@ -104,7 +110,7 @@ describe('WorkItemDetail component', () => {
           typePolicies: includeWidgets ? config.cacheConfig.typePolicies : {},
         },
       ),
-      propsData: { isModal, workItemId },
+      propsData: { isModal, workItemId, iid: '1' },
       data() {
         return {
           updateInProgress,
@@ -114,15 +120,24 @@ describe('WorkItemDetail component', () => {
       provide: {
         glFeatures: {
           workItemsMvc2: workItemsMvc2Enabled,
+          useIidInWorkItemsPath: fetchByIid,
         },
         hasIssueWeightsFeature: true,
         hasIterationsFeature: true,
         projectNamespace: 'namespace',
+        fullPath: 'group/project',
       },
       stubs: {
         WorkItemWeight: true,
         WorkItemIteration: true,
       },
+      mocks: {
+        $route: {
+          query: {
+            iid_path: iidPathQueryParam,
+          },
+        },
+      },
     });
   };
 
@@ -421,8 +436,9 @@ describe('WorkItemDetail component', () => {
   });
 
   describe('subscriptions', () => {
-    it('calls the title subscription', () => {
+    it('calls the title subscription', async () => {
       createComponent();
+      await waitForPromises();
 
       expect(titleSubscriptionHandler).toHaveBeenCalledWith({
         issuableId: workItemQueryResponse.data.workItem.id,
@@ -571,4 +587,35 @@ describe('WorkItemDetail component', () => {
       expect(findWorkItemInformationAlert().exists()).toBe(false);
     });
   });
+
+  it('calls the global ID work item query when `useIidInWorkItemsPath` feature flag is false', async () => {
+    createComponent();
+    await waitForPromises();
+
+    expect(successHandler).toHaveBeenCalledWith({
+      id: workItemQueryResponse.data.workItem.id,
+    });
+    expect(successByIidHandler).not.toHaveBeenCalled();
+  });
+
+  it('calls the global ID work item query when `useIidInWorkItemsPath` feature flag is true but there is no `iid_path` parameter in URL', async () => {
+    createComponent({ fetchByIid: true });
+    await waitForPromises();
+
+    expect(successHandler).toHaveBeenCalledWith({
+      id: workItemQueryResponse.data.workItem.id,
+    });
+    expect(successByIidHandler).not.toHaveBeenCalled();
+  });
+
+  it('calls the IID work item query when `useIidInWorkItemsPath` feature flag is true and `iid_path` route parameter is present', async () => {
+    createComponent({ fetchByIid: true, iidPathQueryParam: 'true' });
+    await waitForPromises();
+
+    expect(successHandler).not.toHaveBeenCalled();
+    expect(successByIidHandler).toHaveBeenCalledWith({
+      fullPath: 'group/project',
+      iid: '1',
+    });
+  });
 });
diff --git a/spec/frontend/work_items/components/work_item_labels_spec.js b/spec/frontend/work_items/components/work_item_labels_spec.js
index e6ff7e8502d..9f7659b3f8d 100644
--- a/spec/frontend/work_items/components/work_item_labels_spec.js
+++ b/spec/frontend/work_items/components/work_item_labels_spec.js
@@ -9,6 +9,7 @@ import labelSearchQuery from '~/vue_shared/components/sidebar/labels_select_widg
 import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
 import workItemLabelsSubscription from 'ee_else_ce/work_items/graphql/work_item_labels.subscription.graphql';
 import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
+import workItemByIidQuery from '~/work_items/graphql/work_item_by_iid.query.graphql';
 import WorkItemLabels from '~/work_items/components/work_item_labels.vue';
 import { i18n, I18N_WORK_ITEM_ERROR_FETCHING_LABELS } from '~/work_items/constants';
 import {
@@ -18,6 +19,7 @@ import {
   workItemResponseFactory,
   updateWorkItemMutationResponse,
   workItemLabelsSubscriptionResponse,
+  projectWorkItemResponse,
 } from '../mock_data';
 
 Vue.use(VueApollo);
@@ -33,6 +35,7 @@ describe('WorkItemLabels component', () => {
   const findLabelsTitle = () => wrapper.findByTestId('labels-title');
 
   const workItemQuerySuccess = jest.fn().mockResolvedValue(workItemQueryResponse);
+  const workItemByIidResponseHandler = jest.fn().mockResolvedValue(projectWorkItemResponse);
   const successSearchQueryHandler = jest.fn().mockResolvedValue(projectLabelsResponse);
   const successUpdateWorkItemMutationHandler = jest
     .fn()
@@ -45,12 +48,14 @@ describe('WorkItemLabels component', () => {
     workItemQueryHandler = workItemQuerySuccess,
     searchQueryHandler = successSearchQueryHandler,
     updateWorkItemMutationHandler = successUpdateWorkItemMutationHandler,
+    fetchByIid = false,
   } = {}) => {
     const apolloProvider = createMockApollo([
       [workItemQuery, workItemQueryHandler],
       [labelSearchQuery, searchQueryHandler],
       [updateWorkItemMutation, updateWorkItemMutationHandler],
       [workItemLabelsSubscription, subscriptionHandler],
+      [workItemByIidQuery, workItemByIidResponseHandler],
     ]);
 
     wrapper = mountExtended(WorkItemLabels, {
@@ -58,6 +63,10 @@ describe('WorkItemLabels component', () => {
         workItemId,
         canUpdate,
         fullPath: 'test-project-path',
+        queryVariables: {
+          id: workItemId,
+        },
+        fetchByIid,
       },
       attachTo: document.body,
       apolloProvider,
@@ -226,4 +235,20 @@ describe('WorkItemLabels component', () => {
       });
     });
   });
+
+  it('calls the global ID work item query when `fetchByIid` prop is false', async () => {
+    createComponent({ fetchByIid: false });
+    await waitForPromises();
+
+    expect(workItemQuerySuccess).toHaveBeenCalled();
+    expect(workItemByIidResponseHandler).not.toHaveBeenCalled();
+  });
+
+  it('calls the IID work item query when when `fetchByIid` prop is true', async () => {
+    createComponent({ fetchByIid: true });
+    await waitForPromises();
+
+    expect(workItemQuerySuccess).not.toHaveBeenCalled();
+    expect(workItemByIidResponseHandler).toHaveBeenCalled();
+  });
 });
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index ed90b11222a..d6fcd029990 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -41,6 +41,7 @@ export const workItemQueryResponse = {
     workItem: {
       __typename: 'WorkItem',
       id: 'gid://gitlab/WorkItem/1',
+      iid: '1',
       title: 'Test',
       state: 'OPEN',
       description: 'description',
@@ -113,6 +114,7 @@ export const updateWorkItemMutationResponse = {
       workItem: {
         __typename: 'WorkItem',
         id: 'gid://gitlab/WorkItem/1',
+        iid: '1',
         title: 'Updated title',
         state: 'OPEN',
         description: 'description',
@@ -199,6 +201,7 @@ export const workItemResponseFactory = ({
     workItem: {
       __typename: 'WorkItem',
       id: 'gid://gitlab/WorkItem/1',
+      iid: 1,
       title: 'Updated title',
       state: 'OPEN',
       description: 'description',
@@ -331,6 +334,7 @@ export const createWorkItemMutationResponse = {
       workItem: {
         __typename: 'WorkItem',
         id: 'gid://gitlab/WorkItem/1',
+        iid: '1',
         title: 'Updated title',
         state: 'OPEN',
         description: 'description',
@@ -368,6 +372,7 @@ export const createWorkItemFromTaskMutationResponse = {
         __typename: 'WorkItem',
         description: 'New description',
         id: 'gid://gitlab/WorkItem/1',
+        iid: '1',
         title: 'Updated title',
         state: 'OPEN',
         confidential: false,
@@ -405,6 +410,7 @@ export const createWorkItemFromTaskMutationResponse = {
       newWorkItem: {
         __typename: 'WorkItem',
         id: 'gid://gitlab/WorkItem/1000000',
+        iid: '100',
         title: 'Updated title',
         state: 'OPEN',
         createdAt: '2022-08-03T12:41:54Z',
@@ -776,6 +782,7 @@ export const changeWorkItemParentMutationResponse = {
         },
         description: null,
         id: 'gid://gitlab/WorkItem/2',
+        iid: '2',
         state: 'OPEN',
         title: 'Foo',
         confidential: false,
@@ -1122,3 +1129,14 @@ export const projectMilestonesResponseWithNoMilestones = {
     },
   },
 };
+
+export const projectWorkItemResponse = {
+  data: {
+    workspace: {
+      id: 'gid://gitlab/Project/1',
+      workItems: {
+        nodes: [workItemQueryResponse.data.workItem],
+      },
+    },
+  },
+};
diff --git a/spec/frontend/work_items/pages/create_work_item_spec.js b/spec/frontend/work_items/pages/create_work_item_spec.js
index 15dac25b7d9..387c8a355fa 100644
--- a/spec/frontend/work_items/pages/create_work_item_spec.js
+++ b/spec/frontend/work_items/pages/create_work_item_spec.js
@@ -37,12 +37,17 @@ describe('Create work item component', () => {
     props = {},
     queryHandler = querySuccessHandler,
     mutationHandler = createWorkItemSuccessHandler,
+    fetchByIid = false,
   } = {}) => {
-    fakeApollo = createMockApollo([
-      [projectWorkItemTypesQuery, queryHandler],
-      [createWorkItemMutation, mutationHandler],
-      [createWorkItemFromTaskMutation, mutationHandler],
-    ]);
+    fakeApollo = createMockApollo(
+      [
+        [projectWorkItemTypesQuery, queryHandler],
+        [createWorkItemMutation, mutationHandler],
+        [createWorkItemFromTaskMutation, mutationHandler],
+      ],
+      {},
+      { typePolicies: { Project: { merge: true } } },
+    );
     wrapper = shallowMount(CreateWorkItem, {
       apolloProvider: fakeApollo,
       data() {
@@ -61,6 +66,9 @@ describe('Create work item component', () => {
       },
       provide: {
         fullPath: 'full-path',
+        glFeatures: {
+          useIidInWorkItemsPath: fetchByIid,
+        },
       },
     });
   };
@@ -99,7 +107,12 @@ describe('Create work item component', () => {
       wrapper.find('form').trigger('submit');
       await waitForPromises();
 
-      expect(wrapper.vm.$router.push).toHaveBeenCalled();
+      expect(wrapper.vm.$router.push).toHaveBeenCalledWith({
+        name: 'workItem',
+        params: {
+          id: '1',
+        },
+      });
     });
 
     it('adds right margin for create button', () => {
@@ -197,4 +210,18 @@ describe('Create work item component', () => {
       'Something went wrong when creating work item. Please try again.',
     );
   });
+
+  it('performs a correct redirect when `useIidInWorkItemsPath` feature flag is enabled', async () => {
+    createComponent({ fetchByIid: true });
+    findTitleInput().vm.$emit('title-input', 'Test title');
+
+    wrapper.find('form').trigger('submit');
+    await waitForPromises();
+
+    expect(wrapper.vm.$router.push).toHaveBeenCalledWith({
+      name: 'workItem',
+      params: { id: '1' },
+      query: { iid_path: 'true' },
+    });
+  });
 });
diff --git a/spec/frontend/work_items/pages/work_item_root_spec.js b/spec/frontend/work_items/pages/work_item_root_spec.js
index d9372f2bcf0..880c4271024 100644
--- a/spec/frontend/work_items/pages/work_item_root_spec.js
+++ b/spec/frontend/work_items/pages/work_item_root_spec.js
@@ -55,6 +55,7 @@ describe('Work items root component', () => {
       isModal: false,
       workItemId: 'gid://gitlab/WorkItem/1',
       workItemParentId: null,
+      iid: '1',
     });
   });
 
@@ -65,11 +66,15 @@ describe('Work items root component', () => {
       deleteWorkItemHandler,
     });
 
-    findWorkItemDetail().vm.$emit('deleteWorkItem');
+    findWorkItemDetail().vm.$emit('deleteWorkItem', { workItemType: 'task', workItemId: '1' });
 
     await waitForPromises();
 
-    expect(deleteWorkItemHandler).toHaveBeenCalled();
+    expect(deleteWorkItemHandler).toHaveBeenCalledWith({
+      input: {
+        id: '1',
+      },
+    });
     expect(mockToastShow).toHaveBeenCalled();
     expect(visitUrl).toHaveBeenCalledWith(issuesListPath);
   });
@@ -81,7 +86,7 @@ describe('Work items root component', () => {
       deleteWorkItemHandler,
     });
 
-    findWorkItemDetail().vm.$emit('deleteWorkItem');
+    findWorkItemDetail().vm.$emit('deleteWorkItem', { workItemType: 'task', workItemId: '1' });
 
     await waitForPromises();