From 37378fecae455a6a907b113bb10889e73968b1b3 Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Tue, 12 Sep 2023 21:52:48 +0530
Subject: [PATCH 1/2] Remove linked item from the work item

Remove linked item from the work item

Changelog: added
EE: true
---
 .../work_item_relationship_list.vue           |  1 +
 .../work_item_relationships.vue               | 84 +++++++++++++++++--
 .../remove_linked_items.mutation.graphql      |  6 ++
 app/controllers/projects/issues_controller.rb |  1 +
 locale/gitlab.pot                             | 11 ++-
 .../work_items/linked_work_items_spec.rb      | 28 +++++++
 .../work_item_add_relationship_form_spec.js   |  9 +-
 .../work_item_relationships_spec.js           | 81 +++++++++++++++++-
 spec/frontend/work_items/mock_data.js         | 12 +++
 9 files changed, 216 insertions(+), 17 deletions(-)
 create mode 100644 app/assets/javascripts/work_items/graphql/remove_linked_items.mutation.graphql

diff --git a/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationship_list.vue b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationship_list.vue
index 279e6ad01b3589..cd6064d4dd0efc 100644
--- a/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationship_list.vue
+++ b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationship_list.vue
@@ -53,6 +53,7 @@ export default {
             :can-update="canUpdate"
             :child-path="linkedItemPath(workItemFullPath, linkedItem.workItem.iid)"
             @click="$emit('showModal', { event: $event, child: linkedItem.workItem })"
+            @removeChild="$emit('removeLinkedItem', linkedItem.workItem)"
           />
         </li>
       </ul>
diff --git a/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue
index 6f02ea507e5318..1ba9dc821aa7ec 100644
--- a/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue
+++ b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue
@@ -1,10 +1,13 @@
 <script>
-import { GlLoadingIcon, GlIcon, GlButton } from '@gitlab/ui';
+import { produce } from 'immer';
+import { GlLoadingIcon, GlIcon, GlButton, GlLink } from '@gitlab/ui';
 
 import { s__ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 import groupWorkItemByIidQuery from '../../graphql/group_work_item_by_iid.query.graphql';
 import workItemByIidQuery from '../../graphql/work_item_by_iid.query.graphql';
+import removeLinkedItemsMutation from '../../graphql/remove_linked_items.mutation.graphql';
 import { WIDGET_TYPE_LINKED_ITEMS, LINKED_CATEGORIES_MAP } from '../../constants';
 
 import WidgetWrapper from '../widget_wrapper.vue';
@@ -16,6 +19,7 @@ export default {
     GlLoadingIcon,
     GlIcon,
     GlButton,
+    GlLink,
     WidgetWrapper,
     WorkItemRelationshipList,
     WorkItemAddRelationshipForm,
@@ -92,6 +96,7 @@ export default {
       linksBlocks: [],
       isShownLinkItemForm: false,
       widgetName: 'linkeditems',
+      helpPath: helpPagePath('/user/okrs.md#linked-items-in-okrs'),
     };
   },
   computed: {
@@ -124,12 +129,71 @@ export default {
     hideLinkItemForm() {
       this.isShownLinkItemForm = false;
     },
+    async removeLinkedItem(linkedItem) {
+      try {
+        const {
+          data: {
+            workItemRemoveLinkedItems: { errors },
+          },
+        } = await this.$apollo.mutate({
+          mutation: removeLinkedItemsMutation,
+          variables: {
+            input: {
+              id: this.workItemId,
+              workItemsIds: [linkedItem.id],
+            },
+          },
+          update: (cache, { data: { workItemRemoveLinkedItems } }) => {
+            const errorMessage = workItemRemoveLinkedItems?.errors;
+            if (errorMessage && errorMessage.length > 0) {
+              [this.error] = errorMessage;
+              return;
+            }
+            const queryArgs = {
+              query: workItemByIidQuery,
+              variables: { fullPath: this.workItemFullPath, iid: this.workItemIid },
+            };
+            const sourceData = cache.readQuery(queryArgs);
+
+            if (!sourceData) {
+              return;
+            }
+
+            cache.writeQuery({
+              ...queryArgs,
+              data: produce(sourceData, (draftState) => {
+                const linkedItems =
+                  draftState.workspace.workItems.nodes[0].widgets?.find(
+                    (widget) => widget.type === WIDGET_TYPE_LINKED_ITEMS,
+                  )?.linkedItems?.nodes || [];
+                const index = linkedItems.findIndex((item) => {
+                  return item.workItem.id === linkedItem.id;
+                });
+                linkedItems.splice(index, 1);
+              }),
+            });
+          },
+        });
+
+        if (errors.length > 0) {
+          [this.error] = errors;
+          return;
+        }
+
+        this.$toast.show(s__('WorkItem|Linked item removed'));
+      } catch {
+        this.error = this.$options.i18n.removeLinkedItemErrorMessage;
+      }
+    },
   },
   i18n: {
     title: s__('WorkItem|Linked Items'),
-    fetchError: s__('WorkItem|Something went wrong when fetching tasks. Please refresh this page.'),
+    fetchError: s__('WorkItem|Something went wrong when fetching items. Please refresh this page.'),
     emptyStateMessage: s__(
-      "WorkItem|Link work items together to show that they're related or that one is blocking others.",
+      "WorkItem|Link items together to show that they're related or that one is blocking others.",
+    ),
+    removeLinkedItemErrorMessage: s__(
+      'WorkItem|Something went wrong when removing item. Please refresh this page.',
     ),
     addChildButtonLabel: s__('WorkItem|Add'),
     relatedToTitle: s__('WorkItem|Related to'),
@@ -182,9 +246,12 @@ export default {
         />
         <gl-loading-icon v-if="isLoading" color="dark" class="gl-my-2" />
         <template v-else>
-          <div v-if="isEmptyRelatedWorkItems" data-testid="links-empty">
+          <div v-if="!isShownLinkItemForm && isEmptyRelatedWorkItems" data-testid="links-empty">
             <p class="gl-new-card-empty">
               {{ $options.i18n.emptyStateMessage }}
+              <gl-link :href="helpPath" data-testid="help-link">
+                {{ __('Learn more.') }}
+              </gl-link>
             </p>
           </div>
           <template v-else>
@@ -197,8 +264,9 @@ export default {
               :linked-items="linksBlocks"
               :heading="$options.i18n.blockingTitle"
               :work-item-full-path="workItemFullPath"
-              :can-update="false"
+              :can-update="canAdminWorkItemLink"
               @showModal="$emit('showModal', { event: $event.event, modalWorkItem: $event.child })"
+              @removeLinkedItem="removeLinkedItem"
             />
             <work-item-relationship-list
               v-if="linksIsBlockedBy.length"
@@ -209,16 +277,18 @@ export default {
               :linked-items="linksIsBlockedBy"
               :heading="$options.i18n.blockedByTitle"
               :work-item-full-path="workItemFullPath"
-              :can-update="false"
+              :can-update="canAdminWorkItemLink"
               @showModal="$emit('showModal', { event: $event.event, modalWorkItem: $event.child })"
+              @removeLinkedItem="removeLinkedItem"
             />
             <work-item-relationship-list
               v-if="linksRelatesTo.length"
               :linked-items="linksRelatesTo"
               :heading="$options.i18n.relatedToTitle"
               :work-item-full-path="workItemFullPath"
-              :can-update="false"
+              :can-update="canAdminWorkItemLink"
               @showModal="$emit('showModal', { event: $event.event, modalWorkItem: $event.child })"
+              @removeLinkedItem="removeLinkedItem"
             />
           </template>
         </template>
diff --git a/app/assets/javascripts/work_items/graphql/remove_linked_items.mutation.graphql b/app/assets/javascripts/work_items/graphql/remove_linked_items.mutation.graphql
new file mode 100644
index 00000000000000..f83f54746066c1
--- /dev/null
+++ b/app/assets/javascripts/work_items/graphql/remove_linked_items.mutation.graphql
@@ -0,0 +1,6 @@
+mutation removeLinkedItems($input: WorkItemRemoveLinkedItemsInput!) {
+  workItemRemoveLinkedItems(input: $input) {
+    errors
+    message
+  }
+}
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index 9f5db91bcda90c..031b32a712ad4c 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -53,6 +53,7 @@ class Projects::IssuesController < Projects::ApplicationController
     push_frontend_feature_flag(:issues_grid_view)
     push_frontend_feature_flag(:service_desk_ticket)
     push_frontend_feature_flag(:issues_list_drawer, project)
+    push_frontend_feature_flag(:linked_work_items, project)
   end
 
   before_action only: [:index, :show] do
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 4c486d8be4f298..747ba42fcf78e7 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -53787,12 +53787,15 @@ msgstr ""
 msgid "WorkItem|Key result"
 msgstr ""
 
-msgid "WorkItem|Link work items together to show that they're related or that one is blocking others."
+msgid "WorkItem|Link items together to show that they're related or that one is blocking others."
 msgstr ""
 
 msgid "WorkItem|Linked Items"
 msgstr ""
 
+msgid "WorkItem|Linked item removed"
+msgstr ""
+
 msgid "WorkItem|Mark as done"
 msgstr ""
 
@@ -53877,6 +53880,9 @@ msgstr ""
 msgid "WorkItem|Something went wrong when deleting the task. Please try again."
 msgstr ""
 
+msgid "WorkItem|Something went wrong when fetching items. Please refresh this page."
+msgstr ""
+
 msgid "WorkItem|Something went wrong when fetching iterations. Please try again."
 msgstr ""
 
@@ -53892,6 +53898,9 @@ msgstr ""
 msgid "WorkItem|Something went wrong when fetching work items. Please try again."
 msgstr ""
 
+msgid "WorkItem|Something went wrong when removing item. Please refresh this page."
+msgstr ""
+
 msgid "WorkItem|Something went wrong when trying to add a child. Please try again."
 msgstr ""
 
diff --git a/spec/features/projects/work_items/linked_work_items_spec.rb b/spec/features/projects/work_items/linked_work_items_spec.rb
index c071a7501f2b56..1fa2f66e71e28c 100644
--- a/spec/features/projects/work_items/linked_work_items_spec.rb
+++ b/spec/features/projects/work_items/linked_work_items_spec.rb
@@ -82,5 +82,33 @@
         expect(find('.work-items-list')).to have_content('Task 1')
       end
     end
+
+    it 'removes a linked item', :aggregate_failures do
+      page.within('.work-item-relationships') do
+        click_button 'Add'
+
+        within_testid('link-work-item-form') do
+          expect(page).to have_button('Add', disabled: true)
+          find_by_testid('work-item-token-select-input').set(task.title)
+          wait_for_all_requests
+          click_button task.title
+
+          expect(page).to have_button('Add', disabled: false)
+
+          click_button 'Add'
+
+          wait_for_all_requests
+        end
+
+        expect(find('.work-items-list')).to have_content('Task 1')
+
+        find_by_testid('links-menu').click
+        click_button 'Remove'
+
+        wait_for_all_requests
+
+        expect(page).not_to have_content('Task 1')
+      end
+    end
   end
 end
diff --git a/spec/frontend/work_items/components/work_item_relationships/work_item_add_relationship_form_spec.js b/spec/frontend/work_items/components/work_item_relationships/work_item_add_relationship_form_spec.js
index 4a5d9bb117593a..edf0fcee904516 100644
--- a/spec/frontend/work_items/components/work_item_relationships/work_item_add_relationship_form_spec.js
+++ b/spec/frontend/work_items/components/work_item_relationships/work_item_add_relationship_form_spec.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { GlForm, GlFormRadioGroup, GlAlert } from '@gitlab/ui';
-import { s__ } from '~/locale';
 
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -61,12 +60,12 @@ describe('WorkItemAddRelationshipForm', () => {
   it('renders link work item form with default values', () => {
     expect(findLinkWorkItemForm().exists()).toBe(true);
     expect(findRadioGroup().props('options')).toEqual([
-      { text: s__('WorkItem|relates to'), value: LINKED_ITEM_TYPE_VALUE.RELATED },
-      { text: s__('WorkItem|blocks'), value: LINKED_ITEM_TYPE_VALUE.BLOCKS },
-      { text: s__('WorkItem|is blocked by'), value: LINKED_ITEM_TYPE_VALUE.BLOCKED_BY },
+      { text: 'relates to', value: LINKED_ITEM_TYPE_VALUE.RELATED },
+      { text: 'blocks', value: LINKED_ITEM_TYPE_VALUE.BLOCKS },
+      { text: 'is blocked by', value: LINKED_ITEM_TYPE_VALUE.BLOCKED_BY },
     ]);
     expect(findLinkWorkItemButton().attributes('disabled')).toBe('true');
-    expect(findMaxWorkItemNote().text()).toBe(s__('WorkItem|Add a maximum of 3 items at a time.'));
+    expect(findMaxWorkItemNote().text()).toBe('Add a maximum of 3 items at a time.');
   });
 
   it('renders work item token input with default props', () => {
diff --git a/spec/frontend/work_items/components/work_item_relationships/work_item_relationships_spec.js b/spec/frontend/work_items/components/work_item_relationships/work_item_relationships_spec.js
index 83f4cf5081eed3..7178fa1aae7268 100644
--- a/spec/frontend/work_items/components/work_item_relationships/work_item_relationships_spec.js
+++ b/spec/frontend/work_items/components/work_item_relationships/work_item_relationships_spec.js
@@ -12,12 +12,14 @@ import WorkItemRelationshipList from '~/work_items/components/work_item_relation
 import WorkItemAddRelationshipForm from '~/work_items/components/work_item_relationships/work_item_add_relationship_form.vue';
 import groupWorkItemByIidQuery from '~/work_items/graphql/group_work_item_by_iid.query.graphql';
 import workItemByIidQuery from '~/work_items/graphql/work_item_by_iid.query.graphql';
+import removeLinkedItemsMutation from '~/work_items/graphql/remove_linked_items.mutation.graphql';
 
 import {
   groupWorkItemByIidResponseFactory,
   workItemByIidResponseFactory,
   mockLinkedItems,
   mockBlockingLinkedItem,
+  removeLinkedWorkItemResponse,
 } from '../../mock_data';
 
 describe('WorkItemRelationships', () => {
@@ -30,17 +32,30 @@ describe('WorkItemRelationships', () => {
   const groupWorkItemsQueryHandler = jest
     .fn()
     .mockResolvedValue(groupWorkItemByIidResponseFactory());
+  const removeLinkedWorkItemSuccessMutationHandler = jest
+    .fn()
+    .mockResolvedValue(removeLinkedWorkItemResponse('Successfully unlinked IDs: 2.'));
+  const removeLinkedWorkItemErrorMutationHandler = jest
+    .fn()
+    .mockResolvedValue(removeLinkedWorkItemResponse(null, ['Linked item removal failed']));
+  const $toast = {
+    show: jest.fn(),
+  };
 
   const createComponent = async ({
     workItemQueryHandler = emptyLinkedWorkItemsQueryHandler,
     workItemType = 'Task',
     isGroup = false,
+    removeLinkedWorkItemMutationHandler = removeLinkedWorkItemSuccessMutationHandler,
   } = {}) => {
+    const mockApollo = createMockApollo([
+      [workItemByIidQuery, workItemQueryHandler],
+      [removeLinkedItemsMutation, removeLinkedWorkItemMutationHandler],
+      [groupWorkItemByIidQuery, groupWorkItemsQueryHandler],
+    ]);
+
     wrapper = shallowMountExtended(WorkItemRelationships, {
-      apolloProvider: createMockApollo([
-        [workItemByIidQuery, workItemQueryHandler],
-        [groupWorkItemByIidQuery, groupWorkItemsQueryHandler],
-      ]),
+      apolloProvider: mockApollo,
       propsData: {
         workItemId: 'gid://gitlab/WorkItem/1',
         workItemIid: '1',
@@ -50,6 +65,9 @@ describe('WorkItemRelationships', () => {
       provide: {
         isGroup,
       },
+      mocks: {
+        $toast,
+      },
     });
 
     await waitForPromises();
@@ -59,6 +77,7 @@ describe('WorkItemRelationships', () => {
   const findWidgetWrapper = () => wrapper.findComponent(WidgetWrapper);
   const findEmptyRelatedMessageContainer = () => wrapper.findByTestId('links-empty');
   const findLinkedItemsCountContainer = () => wrapper.findByTestId('linked-items-count');
+  const findLinkedItemsHelpLink = () => wrapper.findByTestId('help-link');
   const findAllWorkItemRelationshipListComponents = () =>
     wrapper.findAllComponents(WorkItemRelationshipList);
   const findAddButton = () => wrapper.findByTestId('link-item-add-button');
@@ -77,6 +96,9 @@ describe('WorkItemRelationships', () => {
     expect(findEmptyRelatedMessageContainer().exists()).toBe(true);
     expect(findAddButton().exists()).toBe(true);
     expect(findWorkItemRelationshipForm().exists()).toBe(false);
+    expect(findLinkedItemsHelpLink().attributes('href')).toBe(
+      '/help/user/okrs.md#linked-items-in-okrs',
+    );
   });
 
   it('renders blocking linked item lists', async () => {
@@ -158,4 +180,55 @@ describe('WorkItemRelationships', () => {
       expect(groupWorkItemsQueryHandler).toHaveBeenCalled();
     });
   });
+
+  it('removes linked item and shows toast message when removeLinkedItem event is emitted', async () => {
+    await createComponent({
+      workItemQueryHandler: jest
+        .fn()
+        .mockResolvedValue(workItemByIidResponseFactory({ linkedItems: mockLinkedItems })),
+    });
+
+    expect(findLinkedItemsCountContainer().text()).toBe('3');
+
+    await findAllWorkItemRelationshipListComponents()
+      .at(0)
+      .vm.$emit('removeLinkedItem', { id: 'gid://gitlab/WorkItem/2' });
+
+    await waitForPromises();
+
+    expect(removeLinkedWorkItemSuccessMutationHandler).toHaveBeenCalledWith({
+      input: {
+        id: 'gid://gitlab/WorkItem/1',
+        workItemsIds: ['gid://gitlab/WorkItem/2'],
+      },
+    });
+
+    expect($toast.show).toHaveBeenCalledWith('Linked item removed');
+
+    expect(findLinkedItemsCountContainer().text()).toBe('2');
+  });
+
+  it.each`
+    errorType                              | mutationMock                                               | errorMessage
+    ${'an error in the mutation response'} | ${removeLinkedWorkItemErrorMutationHandler}                | ${'Linked item removal failed'}
+    ${'a network error'}                   | ${jest.fn().mockRejectedValue(new Error('Network Error'))} | ${'Something went wrong when removing item. Please refresh this page.'}
+  `(
+    'shows an error message when there is $errorType while removing items',
+    async ({ mutationMock, errorMessage }) => {
+      await createComponent({
+        workItemQueryHandler: jest
+          .fn()
+          .mockResolvedValue(workItemByIidResponseFactory({ linkedItems: mockLinkedItems })),
+        removeLinkedWorkItemMutationHandler: mutationMock,
+      });
+
+      await findAllWorkItemRelationshipListComponents()
+        .at(0)
+        .vm.$emit('removeLinkedItem', { id: 'gid://gitlab/WorkItem/2' });
+
+      await waitForPromises();
+
+      expect(findWidgetWrapper().props('error')).toBe(errorMessage);
+    },
+  );
 });
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index 9cd76c0651eb9c..820802e92d9112 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -3484,6 +3484,18 @@ export const linkedWorkItemResponse = (options, errors = []) => {
   };
 };
 
+export const removeLinkedWorkItemResponse = (message, errors = []) => {
+  return {
+    data: {
+      workItemRemoveLinkedItems: {
+        errors,
+        message,
+        __typename: 'WorkItemRemoveLinkedItemsPayload',
+      },
+    },
+  };
+};
+
 export const groupWorkItemsQueryResponse = {
   data: {
     group: {
-- 
GitLab


From e439821073376a19bfb6424b5c395fb287086a72 Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Wed, 4 Oct 2023 15:48:01 +0530
Subject: [PATCH 2/2] Address review comments related to help path and error
 message

---
 .../work_item_relationships.vue                        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue
index 1ba9dc821aa7ec..8d8aa22e5441ca 100644
--- a/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue
+++ b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue
@@ -15,6 +15,7 @@ import WorkItemRelationshipList from './work_item_relationship_list.vue';
 import WorkItemAddRelationshipForm from './work_item_add_relationship_form.vue';
 
 export default {
+  helpPath: helpPagePath('/user/okrs.md#linked-items-in-okrs'),
   components: {
     GlLoadingIcon,
     GlIcon,
@@ -96,7 +97,6 @@ export default {
       linksBlocks: [],
       isShownLinkItemForm: false,
       widgetName: 'linkeditems',
-      helpPath: helpPagePath('/user/okrs.md#linked-items-in-okrs'),
     };
   },
   computed: {
@@ -144,9 +144,9 @@ export default {
             },
           },
           update: (cache, { data: { workItemRemoveLinkedItems } }) => {
-            const errorMessage = workItemRemoveLinkedItems?.errors;
-            if (errorMessage && errorMessage.length > 0) {
-              [this.error] = errorMessage;
+            const errorMessages = workItemRemoveLinkedItems?.errors;
+            if (errorMessages && errorMessages.length > 0) {
+              [this.error] = errorMessages;
               return;
             }
             const queryArgs = {
@@ -249,7 +249,7 @@ export default {
           <div v-if="!isShownLinkItemForm && isEmptyRelatedWorkItems" data-testid="links-empty">
             <p class="gl-new-card-empty">
               {{ $options.i18n.emptyStateMessage }}
-              <gl-link :href="helpPath" data-testid="help-link">
+              <gl-link :href="$options.helpPath" data-testid="help-link">
                 {{ __('Learn more.') }}
               </gl-link>
             </p>
-- 
GitLab