Prevent cyclic reference in work item hierarchy widget from frontend

Merge branch 'security-498106-prevent-expanding-cyclic-reference-17-8' into 'master'

See merge request gitlab-org/security/gitlab!4672

Changelog: security

app/assets/javascripts/work_items/components/work_item_links/work_item_children_wrapper.vue

@@ -105,6 +105,11 @@ export default {
       required: false,
       default: null,
     },
+    parentId: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -552,6 +557,7 @@ export default {
       :data-child-title="child.title"
       :data-child-type="child.workItemType.name"
       :active-child-item-id="activeChildItemId"
+      :parent-id="parentId"
       class="!gl-border-x-0 !gl-border-b-1 !gl-border-t-0 !gl-border-solid !gl-pb-2 last:!gl-border-b-0 last:!gl-pb-0"
       @drag="$emit('drag', $event)"
       @drop="$emit('drop')"

app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue

@@ -84,6 +84,11 @@ export default {
       required: false,
       default: null,
     },
+    parentId: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -155,6 +160,12 @@ export default {
       );
     },
     shouldExpandChildren() {
+      // In case the parent is the same as the child,
+      // it is creating a cycle and recursively expanding the tree
+      // Issue details: https://gitlab.com/gitlab-org/gitlab/-/issues/498106
+      if (this.parentId === this.childItem.id) {
+        return false;
+      }
       const rolledUpCountsByType =
         findHierarchyWidgets(this.childItem.widgets)?.rolledUpCountsByType || [];
       const nrOpenChildren = rolledUpCountsByType
@@ -321,6 +332,7 @@ export default {
         :dragged-item-type="draggedItemType"
         :allowed-children-by-type="allowedChildrenByType"
         :active-child-item-id="activeChildItemId"
+        :parent-id="parentId"
         @drag="$emit('drag', $event)"
         @drop="$emit('drop')"
         @removeChild="$emit('removeChild', childItem)"

app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue

@@ -457,6 +457,7 @@ export default {
           :allowed-children-by-type="allowedChildrenByType"
           :dragged-item-type="draggedItemType"
           :active-child-item-id="activeChildItemId"
+          :parent-id="workItemId"
           @drag="draggedItemType = $event"
           @drop="draggedItemType = null"
           @error="error = $event"

spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js

@@ -29,6 +29,7 @@ import {
   workItemHierarchyTreeFailureResponse,
   workItemHierarchyNoChildrenTreeResponse,
   workItemHierarchyTreeSingleClosedItemResponse,
+  workItemWithParentAsChild,
 } from '../../mock_data';
 
 jest.mock('~/alert');
@@ -315,6 +316,7 @@ describe('WorkItemLinkChild', () => {
       });
     });
   });
+
   describe('drag & drop', () => {
     const allowedChildrenByType = { Issue: ['Task'], Epic: ['Epic', 'Issue'] };
     const getWorkItemTreeNoChildrenQueryHandler = jest
@@ -389,4 +391,17 @@ describe('WorkItemLinkChild', () => {
       expect(findWorkItemLinkChildContents().classes()).not.toContain('gl-bg-blue-50');
     });
   });
+
+  describe('when parent is same as the grand child', () => {
+    it('hide the expand to avoid cyclic calls', () => {
+      createComponent({
+        childItem: workItemWithParentAsChild,
+        props: {
+          parentId: 'gid://gitlab/WorkItem/1',
+        },
+      });
+
+      expect(findExpandButton().exists()).toBe(false);
+    });
+  });
 });

spec/frontend/work_items/mock_data.js

@@ -2335,6 +2335,38 @@ export const workItemObjectiveWithChild = {
   __typename: 'WorkItem',
 };
 
+export const workItemWithParentAsChild = {
+  id: 'gid://gitlab/WorkItem/1',
+  iid: '1',
+  title: 'Cyclic parent 1',
+  description: 'Objective description',
+  state: 'OPEN',
+  confidential: false,
+  reference: 'test-project-path#12',
+  createdAt: '2022-08-03T12:41:54Z',
+  updatedAt: null,
+  closedAt: null,
+  workItemType: {
+    id: 'gid://gitlab/WorkItems::Type/2411',
+    name: 'Objective',
+    iconName: 'issue-type-objective',
+    __typename: 'WorkItemType',
+  },
+  widgets: [
+    {
+      type: 'HIERARCHY',
+      hasChildren: true,
+      parent: null,
+      rolledUpCountsByType: [],
+      children: {
+        nodes: [],
+      },
+      __typename: 'WorkItemWidgetHierarchy',
+    },
+  ],
+  __typename: 'WorkItem',
+};
+
 export const workItemObjectiveWithoutChild = {
   id: 'gid://gitlab/WorkItem/12',
   iid: '12',