From 31785e55bcbef7049e4d312b4d3714289cd0b301 Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Thu, 10 Aug 2023 15:35:05 +0530
Subject: [PATCH 1/6] List related work items in the work item relationship
 widget

List related work items in the work item relationship widget

Changelog: other
EE: true
---
 .../shared/work_item_link_child_contents.vue  |   2 +-
 .../components/work_item_actions.vue          |   3 +-
 .../components/work_item_detail.vue           |   1 +
 .../work_item_relationship_list.vue           |  61 ++++++
 .../work_item_relationships.vue               | 186 +++++++++++++++++-
 .../work_items/components/work_item_todos.vue |   3 +-
 .../javascripts/work_items/constants.js       |   6 +
 .../work_item_widgets.fragment.graphql        |  25 +++
 .../work_item_widgets.fragment.graphql        |  26 ++-
 locale/gitlab.pot                             |   9 +
 .../work_item_link_child_contents_spec.js     |  14 +-
 .../work_item_relationship_list_spec.js.snap  |  29 +++
 .../work_item_relationship_list_spec.js       |  41 ++++
 .../work_item_relationships_spec.js           |  76 ++++++-
 spec/frontend/work_items/mock_data.js         | 135 +++++++++++++
 15 files changed, 587 insertions(+), 30 deletions(-)
 create mode 100644 app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationship_list.vue
 create mode 100644 spec/frontend/work_items/components/work_item_relationships/__snapshots__/work_item_relationship_list_spec.js.snap
 create mode 100644 spec/frontend/work_items/components/work_item_relationships/work_item_relationship_list_spec.js

diff --git a/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue b/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
index b10a3727e9f638..d6d2fafb2a7078 100644
--- a/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
+++ b/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
@@ -112,7 +112,7 @@ export default {
 
 <template>
   <div
-    class="item-body work-item-link-child gl-relative gl-display-flex gl-flex-grow-1 gl-overflow-break-word gl-min-w-0 gl-pl-3 gl-pr-2 gl-py-2 gl-mx-n2 gl-rounded-base"
+    class="item-body work-item-link-child gl-relative gl-display-flex gl-flex-grow-1 gl-overflow-break-word gl-min-w-0 gl-pl-3 gl-pr-2 gl-py-3 gl-mx-n2 gl-rounded-base"
     data-testid="links-child"
   >
     <div class="item-contents gl-display-flex gl-flex-grow-1 gl-flex-wrap gl-min-w-0">
diff --git a/app/assets/javascripts/work_items/components/work_item_actions.vue b/app/assets/javascripts/work_items/components/work_item_actions.vue
index f4fd69dba1dbe6..59fd39e37432dd 100644
--- a/app/assets/javascripts/work_items/components/work_item_actions.vue
+++ b/app/assets/javascripts/work_items/components/work_item_actions.vue
@@ -131,7 +131,8 @@ export default {
     },
     workItemIid: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
   },
   apollo: {
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index 6beca682f8f441..7549571771bc1e 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -607,6 +607,7 @@ export default {
               v-if="showWorkItemLinkedItems"
               :work-item-iid="workItemIid"
               :work-item-fullpath="workItem.project.fullPath"
+              @showModal="openInModal"
             />
             <work-item-notes
               v-if="workItemNotes"
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
new file mode 100644
index 00000000000000..9e7c27c3e52711
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationship_list.vue
@@ -0,0 +1,61 @@
+<script>
+import WorkItemLinkChildContents from '../shared/work_item_link_child_contents.vue';
+import { workItemPath } from '../../utils';
+
+export default {
+  components: {
+    WorkItemLinkChildContents,
+  },
+  props: {
+    linkedItems: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    heading: {
+      type: String,
+      required: true,
+    },
+    canUpdate: {
+      type: Boolean,
+      required: true,
+    },
+    workItemFullpath: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    linkedItemPath(fullPath, id) {
+      return workItemPath(fullPath, id);
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <h4
+      v-if="heading"
+      data-testid="work-items-list-heading"
+      class="gl-font-sm gl-font-weight-semibold gl-text-gray-700 gl-mx-2 gl-mt-3 gl-mb-2"
+    >
+      {{ heading }}
+    </h4>
+    <div class="work-items-list-body">
+      <ul ref="list" class="work-items-list content-list">
+        <li
+          v-for="linkedItem in linkedItems"
+          :key="linkedItem.node.workItem.id"
+          class="pt-0 pb-0 gl-border-b-0!"
+        >
+          <work-item-link-child-contents
+            :child-item="linkedItem.node.workItem"
+            :can-update="canUpdate"
+            :child-path="linkedItemPath(workItemFullpath, linkedItem.node.workItem.iid)"
+            @click="$emit('showModal', { event: $event, child: linkedItem.node.workItem })"
+          />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
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 7e58627b92fce6..bbe3be7353813f 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,37 +1,160 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon, GlButton, GlLink } from '@gitlab/ui';
 
+import { isMetaKey } from '~/lib/utils/common_utils';
+import { setUrlParams, updateHistory } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 
+import workItemByIidQuery from '../../graphql/work_item_by_iid.query.graphql';
+import { WIDGET_TYPE_LINKED_ITEMS, LINKED_CATEGORIES_MAP } from '../../constants';
+
 import WidgetWrapper from '../widget_wrapper.vue';
+import WorkItemDetailModal from '../work_item_detail_modal.vue';
+import WorkItemRelationshipList from './work_item_relationship_list.vue';
 
 export default {
   components: {
-    WidgetWrapper,
+    GlLoadingIcon,
+    GlIcon,
     GlButton,
+    GlLink,
+    WidgetWrapper,
+    WorkItemRelationshipList,
+    WorkItemDetailModal,
   },
   props: {
     workItemIid: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
     workItemFullpath: {
       type: String,
       required: true,
     },
   },
+  apollo: {
+    workItem: {
+      query: workItemByIidQuery,
+      variables() {
+        return {
+          fullPath: this.workItemFullpath,
+          iid: this.workItemIid,
+        };
+      },
+      update(data) {
+        return data.workspace.workItems.nodes[0] ?? {};
+      },
+      context: {
+        isSingleRequest: true,
+      },
+      skip() {
+        return !this.workItemIid;
+      },
+      error(e) {
+        this.error = e.message || this.$options.i18n.fetchError;
+      },
+      async result() {
+        // When different work items are switched in a modal, the data props are not getting reset.
+        // Thus, duplicating the work items in the list.
+        // Here, the existing list are cleared before the new items are pushed.
+        if (this.workItemIid !== this.activeChild.iid) {
+          this.linksRelatesTo = [];
+          this.linksIsBlockedBy = [];
+          this.linksBlocks = [];
+        }
+        this.linkedWorkItems.forEach((item) => {
+          if (item.node.linkType === LINKED_CATEGORIES_MAP.RELATES_TO) {
+            this.linksRelatesTo.push(item);
+          } else if (item.node.linkType === LINKED_CATEGORIES_MAP.IS_BLOCKED_BY) {
+            this.linksIsBlockedBy.push(item);
+          } else if (item.node.linkType === LINKED_CATEGORIES_MAP.BLOCKS) {
+            this.linksBlocks.push(item);
+          }
+        });
+      },
+    },
+  },
+  data() {
+    return {
+      error: '',
+      activeChild: {},
+      linksRelatesTo: [],
+      linksIsBlockedBy: [],
+      linksBlocks: [],
+    };
+  },
+  computed: {
+    canUpdate() {
+      // This will be false untill we implement remove item mutation
+      return false;
+    },
+    isLoading() {
+      return this.$apollo.queries.workItem.loading;
+    },
+    linkedWorkItemsWidget() {
+      return this.workItem?.widgets?.find((widget) => widget.type === WIDGET_TYPE_LINKED_ITEMS);
+    },
+    linkedWorkItems() {
+      return this.linkedWorkItemsWidget?.linkedItems?.edges || [];
+    },
+    linkedWorkItemsCount() {
+      return this.linkedWorkItems.length;
+    },
+    isEmptyRelatedWorkItems() {
+      return !this.error && this.linkedWorkItems.length === 0;
+    },
+  },
+  methods: {
+    openChild({ event, child }) {
+      if (isMetaKey(event)) {
+        return;
+      }
+      event.preventDefault();
+      this.activeChild = child;
+      this.$refs.modal.show();
+      this.updateWorkItemIdUrlQuery(child);
+    },
+    closeModal() {
+      this.activeChild = {};
+      this.updateWorkItemIdUrlQuery();
+    },
+    updateWorkItemIdUrlQuery({ iid } = {}) {
+      updateHistory({ url: setUrlParams({ work_item_iid: iid }), replace: true });
+    },
+  },
   i18n: {
     title: s__('WorkItem|Linked Items'),
+    fetchError: s__('WorkItem|Something went wrong when fetching tasks. Please refresh this page.'),
     emptyStateMessage: s__(
       "WorkItem|Link work items together to show that they're related or that one is blocking others.",
     ),
+    addChildButtonLabel: s__('WorkItem|Add'),
+    relatedToTitle: s__('WorkItem|Related to'),
+    blockingTitle: s__('WorkItem|Blocking'),
+    blockedByTitle: s__('WorkItem|Blocked by'),
     addLinkedWorkItemButtonLabel: s__('WorkItem|Add'),
   },
 };
 </script>
 <template>
-  <widget-wrapper class="work-item-relationships">
-    <template #header>{{ $options.i18n.title }}</template>
+  <widget-wrapper :error="error" class="work-item-relationships" @dismissAlert="error = undefined">
+    <template #header>
+      <div class="gl-new-card-title-wrapper">
+        <h3 class="gl-new-card-title">
+          <gl-link
+            class="anchor position-absolute gl-text-decoration-none"
+            href="#linked-work-items"
+            aria-hidden="true"
+          />
+          {{ $options.i18n.title }}
+        </h3>
+        <div v-if="linkedWorkItemsCount" class="gl-new-card-count work-items-relationships-count">
+          <gl-icon name="link" class="gl-mr-2" />
+          <span data-testid="linked-items-count">{{ linkedWorkItemsCount }}</span>
+        </div>
+      </div>
+    </template>
     <template #header-right>
       <gl-button size="small" class="gl-ml-3">
         <slot name="add-button-text">{{ $options.i18n.addLinkedWorkItemButtonLabel }}</slot>
@@ -39,12 +162,55 @@ export default {
     </template>
     <template #body>
       <div class="gl-new-card-content">
-        <div data-testid="links-empty">
-          <p class="gl-new-card-empty">
-            {{ $options.i18n.emptyStateMessage }}
-          </p>
-        </div>
+        <gl-loading-icon v-if="isLoading" color="dark" class="gl-my-2" />
+        <template v-else>
+          <div v-if="isEmptyRelatedWorkItems" data-testid="links-empty">
+            <p class="gl-new-card-empty">
+              {{ $options.i18n.emptyStateMessage }}
+            </p>
+          </div>
+          <template v-else>
+            <work-item-relationship-list
+              v-if="linksBlocks.length"
+              :class="{
+                'gl-pb-3 gl-mb-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100':
+                  linksIsBlockedBy.length,
+              }"
+              :linked-items="linksBlocks"
+              :heading="$options.i18n.blockingTitle"
+              :work-item-fullpath="workItemFullpath"
+              :can-update="canUpdate"
+              @showModal="$emit('showModal', { event: $event.event, modalWorkItem: $event.child })"
+            />
+            <work-item-relationship-list
+              v-if="linksIsBlockedBy.length"
+              :class="{
+                'gl-pb-3 gl-mb-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100':
+                  linksRelatesTo.length,
+              }"
+              :linked-items="linksIsBlockedBy"
+              :heading="$options.i18n.blockedByTitle"
+              :work-item-fullpath="workItemFullpath"
+              :can-update="canUpdate"
+              @showModal="$emit('showModal', { event: $event.event, modalWorkItem: $event.child })"
+            />
+            <work-item-relationship-list
+              v-if="linksRelatesTo.length"
+              :linked-items="linksRelatesTo"
+              :heading="$options.i18n.relatedToTitle"
+              :work-item-fullpath="workItemFullpath"
+              :can-update="canUpdate"
+              @showModal="$emit('showModal', { event: $event.event, modalWorkItem: $event.child })"
+            />
+          </template>
+        </template>
       </div>
+      <work-item-detail-modal
+        ref="modal"
+        :work-item-id="activeChild.id"
+        :work-item-iid="activeChild.iid"
+        @close="closeModal"
+      />
     </template>
   </widget-wrapper>
 </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_todos.vue b/app/assets/javascripts/work_items/components/work_item_todos.vue
index b21abf21be5694..8e8d0d47e79b74 100644
--- a/app/assets/javascripts/work_items/components/work_item_todos.vue
+++ b/app/assets/javascripts/work_items/components/work_item_todos.vue
@@ -35,7 +35,8 @@ export default {
     },
     workItemIid: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
     workItemFullpath: {
       type: String,
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index 2834799e4e8cf7..2b118247426281 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -256,3 +256,9 @@ export const WORK_ITEM_TO_ISSUE_MAP = {
   [WIDGET_TYPE_HEALTH_STATUS]: 'healthStatus',
   [WIDGET_TYPE_AWARD_EMOJI]: 'awardEmoji',
 };
+
+export const LINKED_CATEGORIES_MAP = {
+  RELATES_TO: 'relates_to',
+  IS_BLOCKED_BY: 'is_blocked_by',
+  BLOCKS: 'blocks',
+};
diff --git a/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql b/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
index 14cb6f8415c423..46037872600d53 100644
--- a/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
@@ -103,5 +103,30 @@ fragment WorkItemWidgets on WorkItemWidget {
 
   ... on WorkItemWidgetLinkedItems {
     type
+    linkedItems {
+      edges {
+        node {
+          linkId
+          linkType
+          workItem {
+            id
+            iid
+            confidential
+            workItemType {
+              id
+              name
+              iconName
+            }
+            title
+            state
+            createdAt
+            closedAt
+            widgets {
+              ...WorkItemMetadataWidgets
+            }
+          }
+        }
+      }
+    }
   }
 }
diff --git a/ee/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql b/ee/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
index 0c7e85131e9a18..4fb4e8039a8c69 100644
--- a/ee/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
+++ b/ee/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
@@ -125,8 +125,32 @@ fragment WorkItemWidgets on WorkItemWidget {
   ... on WorkItemWidgetAwardEmoji {
     type
   }
-
   ... on WorkItemWidgetLinkedItems {
     type
+    linkedItems {
+      edges {
+        node {
+          linkId
+          linkType
+          workItem {
+            id
+            iid
+            confidential
+            workItemType {
+              id
+              name
+              iconName
+            }
+            title
+            state
+            createdAt
+            closedAt
+            widgets {
+              ...WorkItemMetadataWidgets
+            }
+          }
+        }
+      }
+    }
   }
 }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 879f03519b060b..42d3797f669834 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -53493,6 +53493,12 @@ msgid_plural "WorkItem|Assignees"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "WorkItem|Blocked by"
+msgstr ""
+
+msgid "WorkItem|Blocking"
+msgstr ""
+
 msgid "WorkItem|Cancel"
 msgstr ""
 
@@ -53616,6 +53622,9 @@ msgstr ""
 msgid "WorkItem|Promoted to objective."
 msgstr ""
 
+msgid "WorkItem|Related to"
+msgstr ""
+
 msgid "WorkItem|Remove"
 msgstr ""
 
diff --git a/spec/frontend/work_items/components/shared/work_item_link_child_contents_spec.js b/spec/frontend/work_items/components/shared/work_item_link_child_contents_spec.js
index 9a20e2ec98fe09..b86f9ff34aeb0b 100644
--- a/spec/frontend/work_items/components/shared/work_item_link_child_contents_spec.js
+++ b/spec/frontend/work_items/components/shared/work_item_link_child_contents_spec.js
@@ -10,7 +10,7 @@ import RichTimestampTooltip from '~/vue_shared/components/rich_timestamp_tooltip
 
 import WorkItemLinkChildContents from '~/work_items/components/shared/work_item_link_child_contents.vue';
 import WorkItemLinksMenu from '~/work_items/components/shared/work_item_links_menu.vue';
-import { TASK_TYPE_NAME, WORK_ITEM_TYPE_VALUE_OBJECTIVE } from '~/work_items/constants';
+import { WORK_ITEM_TYPE_VALUE_OBJECTIVE } from '~/work_items/constants';
 
 import {
   workItemTask,
@@ -26,11 +26,9 @@ jest.mock('~/alert');
 describe('WorkItemLinkChildContents', () => {
   Vue.use(VueApollo);
 
-  const WORK_ITEM_ID = 'gid://gitlab/WorkItem/2';
   let wrapper;
   const { LABELS } = workItemObjectiveMetadataWidgets;
   const mockLabels = LABELS.labels.nodes;
-  const mockFullPath = 'gitlab-org/gitlab-test';
 
   const findStatusIconComponent = () =>
     wrapper.findByTestId('item-status-icon').findComponent(GlIcon);
@@ -43,19 +41,11 @@ describe('WorkItemLinkChildContents', () => {
   const findScopedLabel = () => findAllLabels().at(1);
   const findLinksMenuComponent = () => wrapper.findComponent(WorkItemLinksMenu);
 
-  const createComponent = ({
-    canUpdate = true,
-    parentWorkItemId = WORK_ITEM_ID,
-    childItem = workItemTask,
-    workItemType = TASK_TYPE_NAME,
-  } = {}) => {
+  const createComponent = ({ canUpdate = true, childItem = workItemTask } = {}) => {
     wrapper = shallowMountExtended(WorkItemLinkChildContents, {
       propsData: {
         canUpdate,
-        parentWorkItemId,
         childItem,
-        workItemType,
-        fullPath: mockFullPath,
         childPath: '/gitlab-org/gitlab-test/-/work_items/4',
       },
     });
diff --git a/spec/frontend/work_items/components/work_item_relationships/__snapshots__/work_item_relationship_list_spec.js.snap b/spec/frontend/work_items/components/work_item_relationships/__snapshots__/work_item_relationship_list_spec.js.snap
new file mode 100644
index 00000000000000..d9b67c37f72914
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_relationships/__snapshots__/work_item_relationship_list_spec.js.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WorkItemRelationshipList renders linked item list 1`] = `
+<div>
+  <h4
+    class="gl-font-sm gl-font-weight-semibold gl-mb-2 gl-mt-3 gl-mx-2 gl-text-gray-700"
+    data-testid="work-items-list-heading"
+  >
+    Blocking
+  </h4>
+  <div
+    class="work-items-list-body"
+  >
+    <ul
+      class="content-list work-items-list"
+    >
+      <li
+        class="gl-border-b-0! pb-0 pt-0"
+      >
+        <work-item-link-child-contents-stub
+          canupdate="true"
+          childitem="[object Object]"
+          childpath="/test-project-path/-/work_items/83"
+        />
+      </li>
+    </ul>
+  </div>
+</div>
+`;
diff --git a/spec/frontend/work_items/components/work_item_relationships/work_item_relationship_list_spec.js b/spec/frontend/work_items/components/work_item_relationships/work_item_relationship_list_spec.js
new file mode 100644
index 00000000000000..6748beed575614
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_relationships/work_item_relationship_list_spec.js
@@ -0,0 +1,41 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import WorkItemRelationshipList from '~/work_items/components/work_item_relationships/work_item_relationship_list.vue';
+import WorkItemLinkChildContents from '~/work_items/components/shared/work_item_link_child_contents.vue';
+
+import { mockBlockingLinkedItem } from '../../mock_data';
+
+describe('WorkItemRelationshipList', () => {
+  let wrapper;
+  const mockLinkedItems = mockBlockingLinkedItem.linkedItems.edges;
+
+  const createComponent = ({ linkedItems = [], heading = 'Blocking', canUpdate = true } = {}) => {
+    wrapper = shallowMountExtended(WorkItemRelationshipList, {
+      propsData: {
+        linkedItems,
+        heading,
+        canUpdate,
+        workItemFullpath: 'test-project-path',
+      },
+    });
+  };
+
+  const findHeading = () => wrapper.findByTestId('work-items-list-heading');
+  const findWorkItemLinkChildContents = () => wrapper.findComponent(WorkItemLinkChildContents);
+
+  beforeEach(() => {
+    createComponent({ linkedItems: mockLinkedItems });
+  });
+
+  it('renders linked item list', () => {
+    expect(findHeading().text()).toBe('Blocking');
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('renders work item link child contents with correct props', () => {
+    expect(findWorkItemLinkChildContents().props()).toMatchObject({
+      childItem: mockLinkedItems[0].node.workItem,
+      canUpdate: true,
+      childPath: '/test-project-path/-/work_items/83',
+    });
+  });
+});
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 18d13aa251e762..5faeafc2b750d3 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
@@ -1,25 +1,93 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlLoadingIcon } from '@gitlab/ui';
+
+import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+
+import WidgetWrapper from '~/work_items/components/widget_wrapper.vue';
 import WorkItemRelationships from '~/work_items/components/work_item_relationships/work_item_relationships.vue';
+import WorkItemRelationshipList from '~/work_items/components/work_item_relationships/work_item_relationship_list.vue';
+import workItemByIidQuery from '~/work_items/graphql/work_item_by_iid.query.graphql';
+
+import {
+  workItemByIidResponseFactory,
+  mockLinkedItems,
+  mockBlockingLinkedItem,
+} from '../../mock_data';
 
 describe('WorkItemRelationships', () => {
+  Vue.use(VueApollo);
+
   let wrapper;
+  const emptyLinkedWorkItemsQueryHandler = jest
+    .fn()
+    .mockResolvedValue(workItemByIidResponseFactory());
+  const linkedWorkItemsQueryHandler = jest
+    .fn()
+    .mockResolvedValue(workItemByIidResponseFactory({ linkedItems: mockLinkedItems }));
+  const blockingLinkedWorkItemQueryHandler = jest
+    .fn()
+    .mockResolvedValue(workItemByIidResponseFactory({ linkedItems: mockBlockingLinkedItem }));
+
+  const createComponent = async ({
+    workItemQueryHandler = emptyLinkedWorkItemsQueryHandler,
+  } = {}) => {
+    const mockApollo = createMockApollo([[workItemByIidQuery, workItemQueryHandler]]);
 
-  const createComponent = async () => {
     wrapper = shallowMountExtended(WorkItemRelationships, {
+      apolloProvider: mockApollo,
       propsData: {
-        workItem: {},
         workItemIid: '1',
-        workItemFullpath: 'gitlab/path',
+        workItemFullpath: 'test-project-path',
       },
     });
 
     await waitForPromises();
   };
 
-  it('renders the component', () => {
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findWidgetWrapper = () => wrapper.findComponent(WidgetWrapper);
+  const findEmptyRelatedMessageContainer = () => wrapper.findByTestId('links-empty');
+  const findLinkedItemsCountContainer = () => wrapper.findByTestId('linked-items-count');
+  const findAllWorkItemRelationshipListComponents = () =>
+    wrapper.findAllComponents(WorkItemRelationshipList);
+
+  it('shows loading icon when query is not processed', () => {
     createComponent();
 
+    expect(findLoadingIcon().exists()).toBe(true);
+  });
+
+  it('renders the component with empty message when there are no items', async () => {
+    await createComponent();
+
     expect(wrapper.find('.work-item-relationships').exists()).toBe(true);
+    expect(findEmptyRelatedMessageContainer().exists()).toBe(true);
+  });
+
+  it('renders blocking linked item lists', async () => {
+    await createComponent({ workItemQueryHandler: blockingLinkedWorkItemQueryHandler });
+
+    expect(findAllWorkItemRelationshipListComponents().length).toBe(1);
+    expect(findLinkedItemsCountContainer().text()).toBe('1');
+  });
+
+  it('renders blocking, blocked by and related to linked item lists with proper count', async () => {
+    await createComponent({ workItemQueryHandler: linkedWorkItemsQueryHandler });
+
+    // renders all 3 lists: blocking, blocked by and related to
+    expect(findAllWorkItemRelationshipListComponents().length).toBe(3);
+    expect(findLinkedItemsCountContainer().text()).toBe('3');
+  });
+
+  it('shows an alert when list loading fails', async () => {
+    const errorMessage = 'Some error';
+    await createComponent({
+      workItemQueryHandler: jest.fn().mockRejectedValue(new Error(errorMessage)),
+    });
+
+    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 ea4115f178f5a1..44910028a9ba9e 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -451,6 +451,138 @@ export const objectiveType = {
   iconName: 'issue-type-objective',
 };
 
+export const mockEmptyLinkedItems = {
+  type: 'LINKED_ITEMS',
+  blocked: false,
+  blockedByCount: 0,
+  blockingCount: 0,
+  linkedItems: {
+    edges: [],
+    __typename: 'LinkedWorkItemTypeConnection',
+  },
+  __typename: 'WorkItemWidgetLinkedItems',
+};
+
+export const mockBlockingLinkedItem = {
+  type: 'LINKED_ITEMS',
+  linkedItems: {
+    edges: [
+      {
+        node: {
+          linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/8',
+          linkType: 'blocks',
+          workItem: {
+            id: 'gid://gitlab/WorkItem/675',
+            iid: '83',
+            confidential: true,
+            workItemType: {
+              id: 'gid://gitlab/WorkItems::Type/5',
+              name: 'Task',
+              iconName: 'issue-type-task',
+              __typename: 'WorkItemType',
+            },
+            title: 'Task 1201',
+            state: 'OPEN',
+            createdAt: '2023-03-28T10:50:16Z',
+            closedAt: null,
+            widgets: [],
+            __typename: 'WorkItem',
+          },
+          __typename: 'LinkedWorkItemType',
+        },
+        __typename: 'LinkedWorkItemTypeEdge',
+      },
+    ],
+    __typename: 'LinkedWorkItemTypeConnection',
+  },
+  __typename: 'WorkItemWidgetLinkedItems',
+};
+
+export const mockLinkedItems = {
+  type: 'LINKED_ITEMS',
+  linkedItems: {
+    edges: [
+      {
+        node: {
+          linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/8',
+          linkType: 'relates_to',
+          workItem: {
+            id: 'gid://gitlab/WorkItem/675',
+            iid: '83',
+            confidential: true,
+            workItemType: {
+              id: 'gid://gitlab/WorkItems::Type/5',
+              name: 'Task',
+              iconName: 'issue-type-task',
+              __typename: 'WorkItemType',
+            },
+            title: 'Task 1201',
+            state: 'OPEN',
+            createdAt: '2023-03-28T10:50:16Z',
+            closedAt: null,
+            widgets: [],
+            __typename: 'WorkItem',
+          },
+          __typename: 'LinkedWorkItemType',
+        },
+        __typename: 'LinkedWorkItemTypeEdge',
+      },
+      {
+        node: {
+          linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/9',
+          linkType: 'is_blocked_by',
+          workItem: {
+            id: 'gid://gitlab/WorkItem/646',
+            iid: '55',
+            confidential: true,
+            workItemType: {
+              id: 'gid://gitlab/WorkItems::Type/6',
+              name: 'Objective',
+              iconName: 'issue-type-objective',
+              __typename: 'WorkItemType',
+            },
+            title: 'Multilevel Objective 1',
+            state: 'OPEN',
+            createdAt: '2023-03-28T10:50:16Z',
+            closedAt: null,
+            widgets: [],
+            __typename: 'WorkItem',
+          },
+          __typename: 'LinkedWorkItemType',
+        },
+        __typename: 'LinkedWorkItemTypeEdge',
+      },
+      {
+        node: {
+          linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/10',
+          linkType: 'blocks',
+          workItem: {
+            id: 'gid://gitlab/WorkItem/647',
+            iid: '56',
+            confidential: true,
+            workItemType: {
+              id: 'gid://gitlab/WorkItems::Type/6',
+              name: 'Objective',
+              iconName: 'issue-type-objective',
+              __typename: 'WorkItemType',
+            },
+            title: 'Multilevel Objective 2',
+            state: 'OPEN',
+            createdAt: '2023-03-28T10:50:16Z',
+            closedAt: null,
+            widgets: [],
+            __typename: 'WorkItem',
+          },
+          __typename: 'LinkedWorkItemType',
+        },
+        __typename: 'LinkedWorkItemTypeEdge',
+      },
+    ],
+    __typename: 'LinkedWorkItemTypeConnection',
+  },
+  __typename: 'WorkItemWidgetLinkedItems',
+};
+
 export const workItemResponseFactory = ({
   iid = '1',
   canUpdate = false,
@@ -473,6 +605,7 @@ export const workItemResponseFactory = ({
   confidential = false,
   canInviteMembers = false,
   labelsWidgetPresent = true,
+  linkedItemsWidgetPresent = true,
   labels = mockLabels,
   allowsScopedLabels = false,
   lastEditedAt = null,
@@ -485,6 +618,7 @@ export const workItemResponseFactory = ({
   updatedAt = '2022-08-08T12:32:54Z',
   awardEmoji = mockAwardsWidget,
   state = 'OPEN',
+  linkedItems = mockEmptyLinkedItems,
 } = {}) => ({
   data: {
     workItem: {
@@ -683,6 +817,7 @@ export const workItemResponseFactory = ({
               awardEmoji,
             }
           : { type: 'MOCK TYPE' },
+        linkedItemsWidgetPresent ? linkedItems : { type: 'MOCK TYPE' },
       ],
     },
   },
-- 
GitLab


From dc932ca5d0429d488213995014c96922c4a16ef2 Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Fri, 8 Sep 2023 22:14:56 +0530
Subject: [PATCH 2/6] Apply UX suggestion for list title color

---
 .../shared/work_item_link_child_contents.vue  |  4 +-
 .../work_item_children_wrapper.vue            | 44 ++++++++++---------
 .../work_item_links/work_item_link_child.vue  |  4 +-
 3 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue b/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
index d6d2fafb2a7078..f50cfac90f7345 100644
--- a/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
+++ b/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
@@ -112,7 +112,7 @@ export default {
 
 <template>
   <div
-    class="item-body work-item-link-child gl-relative gl-display-flex gl-flex-grow-1 gl-overflow-break-word gl-min-w-0 gl-pl-3 gl-pr-2 gl-py-3 gl-mx-n2 gl-rounded-base"
+    class="item-body work-item-link-child gl-relative gl-display-flex gl-flex-grow-1 gl-overflow-break-word gl-min-w-0 gl-pl-3 gl-pr-2 gl-py-2 gl-mx-n2 gl-rounded-base"
     data-testid="links-child"
   >
     <div class="item-contents gl-display-flex gl-flex-grow-1 gl-flex-wrap gl-min-w-0">
@@ -149,7 +149,7 @@ export default {
           </span>
           <gl-link
             :href="childPath"
-            class="gl-text-truncate gl-text-black-normal! gl-font-weight-semibold"
+            class="gl-text-truncate gl-font-weight-semibold"
             data-testid="item-title"
             @click="$emit('click', $event)"
             @mouseover="$emit('mouseover')"
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_children_wrapper.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_children_wrapper.vue
index bf427feaa3567e..08a7ad2f082a51 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_children_wrapper.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_children_wrapper.vue
@@ -245,25 +245,27 @@ export default {
 </script>
 
 <template>
-  <component
-    :is="treeRootWrapper"
-    v-bind="treeRootOptions"
-    :class="{ 'gl-cursor-grab sortable-container': canReorder }"
-    @end="handleDragOnEnd"
-  >
-    <work-item-link-child
-      v-for="child in children"
-      :key="child.id"
-      :can-update="canUpdate"
-      :issuable-gid="workItemId"
-      :child-item="child"
-      :confidential="child.confidential"
-      :work-item-type="workItemType"
-      :has-indirect-children="hasIndirectChildren"
-      @mouseover="prefetchWorkItem(child)"
-      @mouseout="clearPrefetching"
-      @removeChild="removeChild"
-      @click="$emit('show-modal', { event: $event, child: $event.childItem || child })"
-    />
-  </component>
+  <ul class="content-list">
+    <component
+      :is="treeRootWrapper"
+      v-bind="treeRootOptions"
+      :class="{ 'gl-cursor-grab sortable-container': canReorder }"
+      @end="handleDragOnEnd"
+    >
+      <work-item-link-child
+        v-for="child in children"
+        :key="child.id"
+        :can-update="canUpdate"
+        :issuable-gid="workItemId"
+        :child-item="child"
+        :confidential="child.confidential"
+        :work-item-type="workItemType"
+        :has-indirect-children="hasIndirectChildren"
+        @mouseover="prefetchWorkItem(child)"
+        @mouseout="clearPrefetching"
+        @removeChild="removeChild"
+        @click="$emit('show-modal', { event: $event, child: $event.childItem || child })"
+      />
+    </component>
+  </ul>
 </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
index 4c85652178f102..679287338c810d 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
@@ -213,7 +213,7 @@ export default {
 </script>
 
 <template>
-  <div class="tree-item">
+  <li class="tree-item">
     <div
       class="gl-display-flex gl-align-items-flex-start"
       :class="{ 'gl-ml-6': canHaveChildren && !hasChildren && hasIndirectChildren }"
@@ -250,5 +250,5 @@ export default {
       @removeChild="removeChild"
       @click="$emit('click', $event)"
     />
-  </div>
+  </li>
 </template>
-- 
GitLab


From dd08672bba70b0936297984cbde678e4dcf82f3e Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Tue, 12 Sep 2023 13:07:06 +0530
Subject: [PATCH 3/6] Apply maintainer comments on the MR

---
 .../components/work_item_detail.vue           |  2 +-
 .../work_item_children_wrapper.vue            | 49 +++++++++----------
 .../work_item_relationship_list.vue           |  6 +--
 .../work_item_relationships.vue               | 12 ++---
 .../work_item_relationship_list_spec.js       |  2 +-
 .../work_item_relationships_spec.js           |  2 +-
 spec/frontend/work_items/mock_data.js         |  8 +--
 7 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index 7549571771bc1e..edecd7addcc727 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -606,7 +606,7 @@ export default {
             <work-item-relationships
               v-if="showWorkItemLinkedItems"
               :work-item-iid="workItemIid"
-              :work-item-fullpath="workItem.project.fullPath"
+              :work-item-full-path="workItem.project.fullPath"
               @showModal="openInModal"
             />
             <work-item-notes
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_children_wrapper.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_children_wrapper.vue
index 08a7ad2f082a51..9d9414b53993cd 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_children_wrapper.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_children_wrapper.vue
@@ -56,14 +56,14 @@ export default {
       return isLoggedIn() && this.canUpdate;
     },
     treeRootWrapper() {
-      return this.canReorder ? Draggable : 'div';
+      return this.canReorder ? Draggable : 'ul';
     },
     treeRootOptions() {
       const options = {
         ...defaultSortableOptions,
         fallbackOnBody: false,
         group: 'sortable-container',
-        tag: 'div',
+        tag: 'ul',
         'ghost-class': 'tree-item-drag-active',
         'data-parent-id': this.workItemId,
         value: this.children,
@@ -245,27 +245,26 @@ export default {
 </script>
 
 <template>
-  <ul class="content-list">
-    <component
-      :is="treeRootWrapper"
-      v-bind="treeRootOptions"
-      :class="{ 'gl-cursor-grab sortable-container': canReorder }"
-      @end="handleDragOnEnd"
-    >
-      <work-item-link-child
-        v-for="child in children"
-        :key="child.id"
-        :can-update="canUpdate"
-        :issuable-gid="workItemId"
-        :child-item="child"
-        :confidential="child.confidential"
-        :work-item-type="workItemType"
-        :has-indirect-children="hasIndirectChildren"
-        @mouseover="prefetchWorkItem(child)"
-        @mouseout="clearPrefetching"
-        @removeChild="removeChild"
-        @click="$emit('show-modal', { event: $event, child: $event.childItem || child })"
-      />
-    </component>
-  </ul>
+  <component
+    :is="treeRootWrapper"
+    v-bind="treeRootOptions"
+    class="content-list"
+    :class="{ 'gl-cursor-grab sortable-container': canReorder }"
+    @end="handleDragOnEnd"
+  >
+    <work-item-link-child
+      v-for="child in children"
+      :key="child.id"
+      :can-update="canUpdate"
+      :issuable-gid="workItemId"
+      :child-item="child"
+      :confidential="child.confidential"
+      :work-item-type="workItemType"
+      :has-indirect-children="hasIndirectChildren"
+      @mouseover="prefetchWorkItem(child)"
+      @mouseout="clearPrefetching"
+      @removeChild="removeChild"
+      @click="$emit('show-modal', { event: $event, child: $event.childItem || child })"
+    />
+  </component>
 </template>
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 9e7c27c3e52711..a3fd74ce9d202e 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
@@ -20,7 +20,7 @@ export default {
       type: Boolean,
       required: true,
     },
-    workItemFullpath: {
+    workItemFullPath: {
       type: String,
       required: true,
     },
@@ -46,12 +46,12 @@ export default {
         <li
           v-for="linkedItem in linkedItems"
           :key="linkedItem.node.workItem.id"
-          class="pt-0 pb-0 gl-border-b-0!"
+          class="gl-pt-0! gl-pb-0! gl-border-b-0!"
         >
           <work-item-link-child-contents
             :child-item="linkedItem.node.workItem"
             :can-update="canUpdate"
-            :child-path="linkedItemPath(workItemFullpath, linkedItem.node.workItem.iid)"
+            :child-path="linkedItemPath(workItemFullPath, linkedItem.node.workItem.iid)"
             @click="$emit('showModal', { event: $event, child: linkedItem.node.workItem })"
           />
         </li>
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 bbe3be7353813f..6ae2e1b9071307 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
@@ -28,7 +28,7 @@ export default {
       required: false,
       default: null,
     },
-    workItemFullpath: {
+    workItemFullPath: {
       type: String,
       required: true,
     },
@@ -38,7 +38,7 @@ export default {
       query: workItemByIidQuery,
       variables() {
         return {
-          fullPath: this.workItemFullpath,
+          fullPath: this.workItemFullPath,
           iid: this.workItemIid,
         };
       },
@@ -149,7 +149,7 @@ export default {
           />
           {{ $options.i18n.title }}
         </h3>
-        <div v-if="linkedWorkItemsCount" class="gl-new-card-count work-items-relationships-count">
+        <div v-if="linkedWorkItemsCount" class="gl-new-card-count">
           <gl-icon name="link" class="gl-mr-2" />
           <span data-testid="linked-items-count">{{ linkedWorkItemsCount }}</span>
         </div>
@@ -178,7 +178,7 @@ export default {
               }"
               :linked-items="linksBlocks"
               :heading="$options.i18n.blockingTitle"
-              :work-item-fullpath="workItemFullpath"
+              :work-item-full-path="workItemFullPath"
               :can-update="canUpdate"
               @showModal="$emit('showModal', { event: $event.event, modalWorkItem: $event.child })"
             />
@@ -190,7 +190,7 @@ export default {
               }"
               :linked-items="linksIsBlockedBy"
               :heading="$options.i18n.blockedByTitle"
-              :work-item-fullpath="workItemFullpath"
+              :work-item-full-path="workItemFullPath"
               :can-update="canUpdate"
               @showModal="$emit('showModal', { event: $event.event, modalWorkItem: $event.child })"
             />
@@ -198,7 +198,7 @@ export default {
               v-if="linksRelatesTo.length"
               :linked-items="linksRelatesTo"
               :heading="$options.i18n.relatedToTitle"
-              :work-item-fullpath="workItemFullpath"
+              :work-item-full-path="workItemFullPath"
               :can-update="canUpdate"
               @showModal="$emit('showModal', { event: $event.event, modalWorkItem: $event.child })"
             />
diff --git a/spec/frontend/work_items/components/work_item_relationships/work_item_relationship_list_spec.js b/spec/frontend/work_items/components/work_item_relationships/work_item_relationship_list_spec.js
index 6748beed575614..907c1cf9918fa4 100644
--- a/spec/frontend/work_items/components/work_item_relationships/work_item_relationship_list_spec.js
+++ b/spec/frontend/work_items/components/work_item_relationships/work_item_relationship_list_spec.js
@@ -14,7 +14,7 @@ describe('WorkItemRelationshipList', () => {
         linkedItems,
         heading,
         canUpdate,
-        workItemFullpath: 'test-project-path',
+        workItemFullPath: 'test-project-path',
       },
     });
   };
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 5faeafc2b750d3..c9a2499b127db0 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
@@ -40,7 +40,7 @@ describe('WorkItemRelationships', () => {
       apolloProvider: mockApollo,
       propsData: {
         workItemIid: '1',
-        workItemFullpath: 'test-project-path',
+        workItemFullPath: 'test-project-path',
       },
     });
 
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index 44910028a9ba9e..b98e632b81233a 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -1,3 +1,5 @@
+import { WIDGET_TYPE_LINKED_ITEMS } from '~/work_items/constants';
+
 export const mockAssignees = [
   {
     __typename: 'UserCore',
@@ -452,7 +454,7 @@ export const objectiveType = {
 };
 
 export const mockEmptyLinkedItems = {
-  type: 'LINKED_ITEMS',
+  type: WIDGET_TYPE_LINKED_ITEMS,
   blocked: false,
   blockedByCount: 0,
   blockingCount: 0,
@@ -464,7 +466,7 @@ export const mockEmptyLinkedItems = {
 };
 
 export const mockBlockingLinkedItem = {
-  type: 'LINKED_ITEMS',
+  type: WIDGET_TYPE_LINKED_ITEMS,
   linkedItems: {
     edges: [
       {
@@ -499,7 +501,7 @@ export const mockBlockingLinkedItem = {
 };
 
 export const mockLinkedItems = {
-  type: 'LINKED_ITEMS',
+  type: WIDGET_TYPE_LINKED_ITEMS,
   linkedItems: {
     edges: [
       {
-- 
GitLab


From 9df7fd2139888e26de1cb111d50a605453e908d2 Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Tue, 12 Sep 2023 15:51:24 +0530
Subject: [PATCH 4/6] Change edges to nodes of linked items

---
 .../work_item_relationship_list.vue           |   8 +-
 .../work_item_relationships.vue               |  16 +-
 .../work_item_widgets.fragment.graphql        |  36 ++--
 .../work_item_widgets.fragment.graphql        |  36 ++--
 .../work_item_relationship_list_spec.js.snap  |   2 +-
 .../work_item_relationship_list_spec.js       |   4 +-
 spec/frontend/work_items/mock_data.js         | 162 ++++++++----------
 7 files changed, 121 insertions(+), 143 deletions(-)

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 a3fd74ce9d202e..cbe830f9565ae7 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
@@ -45,14 +45,14 @@ export default {
       <ul ref="list" class="work-items-list content-list">
         <li
           v-for="linkedItem in linkedItems"
-          :key="linkedItem.node.workItem.id"
+          :key="linkedItem.workItem.id"
           class="gl-pt-0! gl-pb-0! gl-border-b-0!"
         >
           <work-item-link-child-contents
-            :child-item="linkedItem.node.workItem"
+            :child-item="linkedItem.workItem"
             :can-update="canUpdate"
-            :child-path="linkedItemPath(workItemFullPath, linkedItem.node.workItem.iid)"
-            @click="$emit('showModal', { event: $event, child: linkedItem.node.workItem })"
+            :child-path="linkedItemPath(workItemFullPath, linkedItem.workItem.iid)"
+            @click="$emit('showModal', { event: $event, child: 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 6ae2e1b9071307..e738bc2b564ea0 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,5 +1,5 @@
 <script>
-import { GlLoadingIcon, GlIcon, GlButton, GlLink } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon, GlButton } from '@gitlab/ui';
 
 import { isMetaKey } from '~/lib/utils/common_utils';
 import { setUrlParams, updateHistory } from '~/lib/utils/url_utility';
@@ -17,7 +17,6 @@ export default {
     GlLoadingIcon,
     GlIcon,
     GlButton,
-    GlLink,
     WidgetWrapper,
     WorkItemRelationshipList,
     WorkItemDetailModal,
@@ -64,11 +63,11 @@ export default {
           this.linksBlocks = [];
         }
         this.linkedWorkItems.forEach((item) => {
-          if (item.node.linkType === LINKED_CATEGORIES_MAP.RELATES_TO) {
+          if (item.linkType === LINKED_CATEGORIES_MAP.RELATES_TO) {
             this.linksRelatesTo.push(item);
-          } else if (item.node.linkType === LINKED_CATEGORIES_MAP.IS_BLOCKED_BY) {
+          } else if (item.linkType === LINKED_CATEGORIES_MAP.IS_BLOCKED_BY) {
             this.linksIsBlockedBy.push(item);
-          } else if (item.node.linkType === LINKED_CATEGORIES_MAP.BLOCKS) {
+          } else if (item.linkType === LINKED_CATEGORIES_MAP.BLOCKS) {
             this.linksBlocks.push(item);
           }
         });
@@ -96,7 +95,7 @@ export default {
       return this.workItem?.widgets?.find((widget) => widget.type === WIDGET_TYPE_LINKED_ITEMS);
     },
     linkedWorkItems() {
-      return this.linkedWorkItemsWidget?.linkedItems?.edges || [];
+      return this.linkedWorkItemsWidget?.linkedItems?.nodes || [];
     },
     linkedWorkItemsCount() {
       return this.linkedWorkItems.length;
@@ -142,11 +141,6 @@ export default {
     <template #header>
       <div class="gl-new-card-title-wrapper">
         <h3 class="gl-new-card-title">
-          <gl-link
-            class="anchor position-absolute gl-text-decoration-none"
-            href="#linked-work-items"
-            aria-hidden="true"
-          />
           {{ $options.i18n.title }}
         </h3>
         <div v-if="linkedWorkItemsCount" class="gl-new-card-count">
diff --git a/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql b/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
index 46037872600d53..ffc9fe2f7f73b4 100644
--- a/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
@@ -104,26 +104,24 @@ fragment WorkItemWidgets on WorkItemWidget {
   ... on WorkItemWidgetLinkedItems {
     type
     linkedItems {
-      edges {
-        node {
-          linkId
-          linkType
-          workItem {
+      nodes {
+        linkId
+        linkType
+        workItem {
+          id
+          iid
+          confidential
+          workItemType {
             id
-            iid
-            confidential
-            workItemType {
-              id
-              name
-              iconName
-            }
-            title
-            state
-            createdAt
-            closedAt
-            widgets {
-              ...WorkItemMetadataWidgets
-            }
+            name
+            iconName
+          }
+          title
+          state
+          createdAt
+          closedAt
+          widgets {
+            ...WorkItemMetadataWidgets
           }
         }
       }
diff --git a/ee/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql b/ee/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
index 4fb4e8039a8c69..8d71e43db856c6 100644
--- a/ee/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
+++ b/ee/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
@@ -128,26 +128,24 @@ fragment WorkItemWidgets on WorkItemWidget {
   ... on WorkItemWidgetLinkedItems {
     type
     linkedItems {
-      edges {
-        node {
-          linkId
-          linkType
-          workItem {
+      nodes {
+        linkId
+        linkType
+        workItem {
+          id
+          iid
+          confidential
+          workItemType {
             id
-            iid
-            confidential
-            workItemType {
-              id
-              name
-              iconName
-            }
-            title
-            state
-            createdAt
-            closedAt
-            widgets {
-              ...WorkItemMetadataWidgets
-            }
+            name
+            iconName
+          }
+          title
+          state
+          createdAt
+          closedAt
+          widgets {
+            ...WorkItemMetadataWidgets
           }
         }
       }
diff --git a/spec/frontend/work_items/components/work_item_relationships/__snapshots__/work_item_relationship_list_spec.js.snap b/spec/frontend/work_items/components/work_item_relationships/__snapshots__/work_item_relationship_list_spec.js.snap
index d9b67c37f72914..9105e4de5e0a96 100644
--- a/spec/frontend/work_items/components/work_item_relationships/__snapshots__/work_item_relationship_list_spec.js.snap
+++ b/spec/frontend/work_items/components/work_item_relationships/__snapshots__/work_item_relationship_list_spec.js.snap
@@ -15,7 +15,7 @@ exports[`WorkItemRelationshipList renders linked item list 1`] = `
       class="content-list work-items-list"
     >
       <li
-        class="gl-border-b-0! pb-0 pt-0"
+        class="gl-border-b-0! gl-pb-0! gl-pt-0!"
       >
         <work-item-link-child-contents-stub
           canupdate="true"
diff --git a/spec/frontend/work_items/components/work_item_relationships/work_item_relationship_list_spec.js b/spec/frontend/work_items/components/work_item_relationships/work_item_relationship_list_spec.js
index 907c1cf9918fa4..759ab7e14dacfe 100644
--- a/spec/frontend/work_items/components/work_item_relationships/work_item_relationship_list_spec.js
+++ b/spec/frontend/work_items/components/work_item_relationships/work_item_relationship_list_spec.js
@@ -6,7 +6,7 @@ import { mockBlockingLinkedItem } from '../../mock_data';
 
 describe('WorkItemRelationshipList', () => {
   let wrapper;
-  const mockLinkedItems = mockBlockingLinkedItem.linkedItems.edges;
+  const mockLinkedItems = mockBlockingLinkedItem.linkedItems.nodes;
 
   const createComponent = ({ linkedItems = [], heading = 'Blocking', canUpdate = true } = {}) => {
     wrapper = shallowMountExtended(WorkItemRelationshipList, {
@@ -33,7 +33,7 @@ describe('WorkItemRelationshipList', () => {
 
   it('renders work item link child contents with correct props', () => {
     expect(findWorkItemLinkChildContents().props()).toMatchObject({
-      childItem: mockLinkedItems[0].node.workItem,
+      childItem: mockLinkedItems[0].workItem,
       canUpdate: true,
       childPath: '/test-project-path/-/work_items/83',
     });
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index b98e632b81233a..77d2027d537cc0 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -459,7 +459,7 @@ export const mockEmptyLinkedItems = {
   blockedByCount: 0,
   blockingCount: 0,
   linkedItems: {
-    edges: [],
+    nodes: [],
     __typename: 'LinkedWorkItemTypeConnection',
   },
   __typename: 'WorkItemWidgetLinkedItems',
@@ -468,31 +468,28 @@ export const mockEmptyLinkedItems = {
 export const mockBlockingLinkedItem = {
   type: WIDGET_TYPE_LINKED_ITEMS,
   linkedItems: {
-    edges: [
+    nodes: [
       {
-        node: {
-          linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/8',
-          linkType: 'blocks',
-          workItem: {
-            id: 'gid://gitlab/WorkItem/675',
-            iid: '83',
-            confidential: true,
-            workItemType: {
-              id: 'gid://gitlab/WorkItems::Type/5',
-              name: 'Task',
-              iconName: 'issue-type-task',
-              __typename: 'WorkItemType',
-            },
-            title: 'Task 1201',
-            state: 'OPEN',
-            createdAt: '2023-03-28T10:50:16Z',
-            closedAt: null,
-            widgets: [],
-            __typename: 'WorkItem',
+        linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/8',
+        linkType: 'blocks',
+        workItem: {
+          id: 'gid://gitlab/WorkItem/675',
+          iid: '83',
+          confidential: true,
+          workItemType: {
+            id: 'gid://gitlab/WorkItems::Type/5',
+            name: 'Task',
+            iconName: 'issue-type-task',
+            __typename: 'WorkItemType',
           },
-          __typename: 'LinkedWorkItemType',
+          title: 'Task 1201',
+          state: 'OPEN',
+          createdAt: '2023-03-28T10:50:16Z',
+          closedAt: null,
+          widgets: [],
+          __typename: 'WorkItem',
         },
-        __typename: 'LinkedWorkItemTypeEdge',
+        __typename: 'LinkedWorkItemType',
       },
     ],
     __typename: 'LinkedWorkItemTypeConnection',
@@ -503,81 +500,72 @@ export const mockBlockingLinkedItem = {
 export const mockLinkedItems = {
   type: WIDGET_TYPE_LINKED_ITEMS,
   linkedItems: {
-    edges: [
+    nodes: [
       {
-        node: {
-          linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/8',
-          linkType: 'relates_to',
-          workItem: {
-            id: 'gid://gitlab/WorkItem/675',
-            iid: '83',
-            confidential: true,
-            workItemType: {
-              id: 'gid://gitlab/WorkItems::Type/5',
-              name: 'Task',
-              iconName: 'issue-type-task',
-              __typename: 'WorkItemType',
-            },
-            title: 'Task 1201',
-            state: 'OPEN',
-            createdAt: '2023-03-28T10:50:16Z',
-            closedAt: null,
-            widgets: [],
-            __typename: 'WorkItem',
+        linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/8',
+        linkType: 'relates_to',
+        workItem: {
+          id: 'gid://gitlab/WorkItem/675',
+          iid: '83',
+          confidential: true,
+          workItemType: {
+            id: 'gid://gitlab/WorkItems::Type/5',
+            name: 'Task',
+            iconName: 'issue-type-task',
+            __typename: 'WorkItemType',
           },
-          __typename: 'LinkedWorkItemType',
+          title: 'Task 1201',
+          state: 'OPEN',
+          createdAt: '2023-03-28T10:50:16Z',
+          closedAt: null,
+          widgets: [],
+          __typename: 'WorkItem',
         },
-        __typename: 'LinkedWorkItemTypeEdge',
+        __typename: 'LinkedWorkItemType',
       },
       {
-        node: {
-          linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/9',
-          linkType: 'is_blocked_by',
-          workItem: {
-            id: 'gid://gitlab/WorkItem/646',
-            iid: '55',
-            confidential: true,
-            workItemType: {
-              id: 'gid://gitlab/WorkItems::Type/6',
-              name: 'Objective',
-              iconName: 'issue-type-objective',
-              __typename: 'WorkItemType',
-            },
-            title: 'Multilevel Objective 1',
-            state: 'OPEN',
-            createdAt: '2023-03-28T10:50:16Z',
-            closedAt: null,
-            widgets: [],
-            __typename: 'WorkItem',
+        linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/9',
+        linkType: 'is_blocked_by',
+        workItem: {
+          id: 'gid://gitlab/WorkItem/646',
+          iid: '55',
+          confidential: true,
+          workItemType: {
+            id: 'gid://gitlab/WorkItems::Type/6',
+            name: 'Objective',
+            iconName: 'issue-type-objective',
+            __typename: 'WorkItemType',
           },
-          __typename: 'LinkedWorkItemType',
+          title: 'Multilevel Objective 1',
+          state: 'OPEN',
+          createdAt: '2023-03-28T10:50:16Z',
+          closedAt: null,
+          widgets: [],
+          __typename: 'WorkItem',
         },
-        __typename: 'LinkedWorkItemTypeEdge',
+        __typename: 'LinkedWorkItemType',
       },
       {
-        node: {
-          linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/10',
-          linkType: 'blocks',
-          workItem: {
-            id: 'gid://gitlab/WorkItem/647',
-            iid: '56',
-            confidential: true,
-            workItemType: {
-              id: 'gid://gitlab/WorkItems::Type/6',
-              name: 'Objective',
-              iconName: 'issue-type-objective',
-              __typename: 'WorkItemType',
-            },
-            title: 'Multilevel Objective 2',
-            state: 'OPEN',
-            createdAt: '2023-03-28T10:50:16Z',
-            closedAt: null,
-            widgets: [],
-            __typename: 'WorkItem',
+        linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/10',
+        linkType: 'blocks',
+        workItem: {
+          id: 'gid://gitlab/WorkItem/647',
+          iid: '56',
+          confidential: true,
+          workItemType: {
+            id: 'gid://gitlab/WorkItems::Type/6',
+            name: 'Objective',
+            iconName: 'issue-type-objective',
+            __typename: 'WorkItemType',
           },
-          __typename: 'LinkedWorkItemType',
+          title: 'Multilevel Objective 2',
+          state: 'OPEN',
+          createdAt: '2023-03-28T10:50:16Z',
+          closedAt: null,
+          widgets: [],
+          __typename: 'WorkItem',
         },
-        __typename: 'LinkedWorkItemTypeEdge',
+        __typename: 'LinkedWorkItemType',
       },
     ],
     __typename: 'LinkedWorkItemTypeConnection',
-- 
GitLab


From 01975900c74423eeb76390bed828811224dd347d Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Tue, 12 Sep 2023 18:27:00 +0530
Subject: [PATCH 5/6] Trial for avoiding null workItemIid on modal closure

---
 .../components/work_item_actions.vue          |  3 +-
 .../work_item_links/work_item_links.vue       |  1 -
 .../work_item_relationships.vue               | 43 ++--------
 .../work_items/components/work_item_todos.vue |  3 +-
 .../components/work_item_detail_spec.js       | 81 +++++++++++++++++++
 5 files changed, 89 insertions(+), 42 deletions(-)

diff --git a/app/assets/javascripts/work_items/components/work_item_actions.vue b/app/assets/javascripts/work_items/components/work_item_actions.vue
index 59fd39e37432dd..f4fd69dba1dbe6 100644
--- a/app/assets/javascripts/work_items/components/work_item_actions.vue
+++ b/app/assets/javascripts/work_items/components/work_item_actions.vue
@@ -131,8 +131,7 @@ export default {
     },
     workItemIid: {
       type: String,
-      required: false,
-      default: null,
+      required: true,
     },
   },
   apollo: {
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
index a0ff693e1569ae..445a20e26e2e5a 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
@@ -166,7 +166,6 @@ export default {
       this.updateWorkItemIdUrlQuery(child);
     },
     async closeModal() {
-      this.activeChild = {};
       this.updateWorkItemIdUrlQuery();
     },
     handleWorkItemDeleted(child) {
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 e738bc2b564ea0..ad62f5995a08dc 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,15 +1,12 @@
 <script>
 import { GlLoadingIcon, GlIcon, GlButton } from '@gitlab/ui';
 
-import { isMetaKey } from '~/lib/utils/common_utils';
-import { setUrlParams, updateHistory } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 
 import workItemByIidQuery from '../../graphql/work_item_by_iid.query.graphql';
 import { WIDGET_TYPE_LINKED_ITEMS, LINKED_CATEGORIES_MAP } from '../../constants';
 
 import WidgetWrapper from '../widget_wrapper.vue';
-import WorkItemDetailModal from '../work_item_detail_modal.vue';
 import WorkItemRelationshipList from './work_item_relationship_list.vue';
 
 export default {
@@ -19,13 +16,11 @@ export default {
     GlButton,
     WidgetWrapper,
     WorkItemRelationshipList,
-    WorkItemDetailModal,
   },
   props: {
     workItemIid: {
       type: String,
-      required: false,
-      default: null,
+      required: true,
     },
     workItemFullPath: {
       type: String,
@@ -54,14 +49,13 @@ export default {
         this.error = e.message || this.$options.i18n.fetchError;
       },
       async result() {
-        // When different work items are switched in a modal, the data props are not getting reset.
+        // When work items are switched in a modal, the data props are not getting reset.
         // Thus, duplicating the work items in the list.
         // Here, the existing list are cleared before the new items are pushed.
-        if (this.workItemIid !== this.activeChild.iid) {
-          this.linksRelatesTo = [];
-          this.linksIsBlockedBy = [];
-          this.linksBlocks = [];
-        }
+        this.linksRelatesTo = [];
+        this.linksIsBlockedBy = [];
+        this.linksBlocks = [];
+
         this.linkedWorkItems.forEach((item) => {
           if (item.linkType === LINKED_CATEGORIES_MAP.RELATES_TO) {
             this.linksRelatesTo.push(item);
@@ -77,7 +71,6 @@ export default {
   data() {
     return {
       error: '',
-      activeChild: {},
       linksRelatesTo: [],
       linksIsBlockedBy: [],
       linksBlocks: [],
@@ -104,24 +97,6 @@ export default {
       return !this.error && this.linkedWorkItems.length === 0;
     },
   },
-  methods: {
-    openChild({ event, child }) {
-      if (isMetaKey(event)) {
-        return;
-      }
-      event.preventDefault();
-      this.activeChild = child;
-      this.$refs.modal.show();
-      this.updateWorkItemIdUrlQuery(child);
-    },
-    closeModal() {
-      this.activeChild = {};
-      this.updateWorkItemIdUrlQuery();
-    },
-    updateWorkItemIdUrlQuery({ iid } = {}) {
-      updateHistory({ url: setUrlParams({ work_item_iid: iid }), replace: true });
-    },
-  },
   i18n: {
     title: s__('WorkItem|Linked Items'),
     fetchError: s__('WorkItem|Something went wrong when fetching tasks. Please refresh this page.'),
@@ -199,12 +174,6 @@ export default {
           </template>
         </template>
       </div>
-      <work-item-detail-modal
-        ref="modal"
-        :work-item-id="activeChild.id"
-        :work-item-iid="activeChild.iid"
-        @close="closeModal"
-      />
     </template>
   </widget-wrapper>
 </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_todos.vue b/app/assets/javascripts/work_items/components/work_item_todos.vue
index 8e8d0d47e79b74..b21abf21be5694 100644
--- a/app/assets/javascripts/work_items/components/work_item_todos.vue
+++ b/app/assets/javascripts/work_items/components/work_item_todos.vue
@@ -35,8 +35,7 @@ export default {
     },
     workItemIid: {
       type: String,
-      required: false,
-      default: null,
+      required: true,
     },
     workItemFullpath: {
       type: String,
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 638a92dbd17bb4..fec6d0673c6e82 100644
--- a/spec/frontend/work_items/components/work_item_detail_spec.js
+++ b/spec/frontend/work_items/components/work_item_detail_spec.js
@@ -20,6 +20,7 @@ import WorkItemCreatedUpdated from '~/work_items/components/work_item_created_up
 import WorkItemAttributesWrapper from '~/work_items/components/work_item_attributes_wrapper.vue';
 import WorkItemTitle from '~/work_items/components/work_item_title.vue';
 import WorkItemTree from '~/work_items/components/work_item_links/work_item_tree.vue';
+import WorkItemRelationships from '~/work_items/components/work_item_relationships/work_item_relationships.vue';
 import WorkItemNotes from '~/work_items/components/work_item_notes.vue';
 import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue';
 import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue';
@@ -37,6 +38,7 @@ import {
   workItemByIidResponseFactory,
   objectiveType,
   mockWorkItemCommentNote,
+  mockBlockingLinkedItem,
 } from '../mock_data';
 
 jest.mock('~/lib/utils/common_utils');
@@ -76,6 +78,7 @@ describe('WorkItemDetail component', () => {
   const findCloseButton = () => wrapper.findByTestId('work-item-close');
   const findWorkItemType = () => wrapper.findByTestId('work-item-type');
   const findHierarchyTree = () => wrapper.findComponent(WorkItemTree);
+  const findWorkItemRelationships = () => wrapper.findComponent(WorkItemRelationships);
   const findNotesWidget = () => wrapper.findComponent(WorkItemNotes);
   const findModal = () => wrapper.findComponent(WorkItemDetailModal);
   const findAbuseCategorySelector = () => wrapper.findComponent(AbuseCategorySelector);
@@ -96,6 +99,7 @@ describe('WorkItemDetail component', () => {
     confidentialityMock = [updateWorkItemMutation, jest.fn()],
     error = undefined,
     workItemsMvc2Enabled = false,
+    linkedWorkItemsEnabled = false,
   } = {}) => {
     const handlers = [
       [workItemByIidQuery, handler],
@@ -119,6 +123,7 @@ describe('WorkItemDetail component', () => {
       provide: {
         glFeatures: {
           workItemsMvc2: workItemsMvc2Enabled,
+          linkedWorkItems: linkedWorkItemsEnabled,
         },
         hasIssueWeightsFeature: true,
         hasIterationsFeature: true,
@@ -581,6 +586,82 @@ describe('WorkItemDetail component', () => {
     });
   });
 
+  describe('relationship widget', () => {
+    it('does not render linked items by default', async () => {
+      createComponent();
+      await waitForPromises();
+
+      expect(findWorkItemRelationships().exists()).toBe(false);
+    });
+
+    describe('work item has children', () => {
+      const mockWorkItemLinkedItem = workItemByIidResponseFactory({
+        linkedItems: mockBlockingLinkedItem,
+      });
+      const handler = jest.fn().mockResolvedValue(mockWorkItemLinkedItem);
+
+      it('renders relationship widget when work item has linked items', async () => {
+        createComponent({ handler, linkedWorkItemsEnabled: true });
+        await waitForPromises();
+
+        expect(findWorkItemRelationships().exists()).toBe(true);
+      });
+
+      it('opens the modal with the linked item when `showModal` is emitted', async () => {
+        createComponent({
+          handler,
+          linkedWorkItemsEnabled: true,
+          workItemsMvc2Enabled: true,
+        });
+        await waitForPromises();
+
+        const event = {
+          preventDefault: jest.fn(),
+        };
+
+        findWorkItemRelationships().vm.$emit('showModal', {
+          event,
+          modalWorkItem: { id: 'childWorkItemId' },
+        });
+        await waitForPromises();
+
+        expect(findModal().props().workItemId).toBe('childWorkItemId');
+        expect(showModalHandler).toHaveBeenCalled();
+      });
+
+      describe('linked work item is rendered in a modal and has linked items', () => {
+        beforeEach(async () => {
+          createComponent({
+            isModal: true,
+            handler,
+            workItemsMvc2Enabled: true,
+            linkedWorkItemsEnabled: true,
+          });
+
+          await waitForPromises();
+        });
+
+        it('does not render a new modal', () => {
+          expect(findModal().exists()).toBe(false);
+        });
+
+        it('emits `update-modal` when `show-modal` is emitted', async () => {
+          const event = {
+            preventDefault: jest.fn(),
+          };
+
+          findWorkItemRelationships().vm.$emit('showModal', {
+            event,
+            modalWorkItem: { id: 'childWorkItemId' },
+          });
+          await waitForPromises();
+
+          expect(wrapper.emitted('update-modal')).toBeDefined();
+        });
+      });
+    });
+  });
+
   describe('notes widget', () => {
     it('renders notes by default', async () => {
       createComponent();
-- 
GitLab


From d4c1339731a63f43a65cdb25210b37099f017331 Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Wed, 13 Sep 2023 11:39:39 +0530
Subject: [PATCH 6/6] Support anchor links for all widgets

---
 .../work_items/components/widget_wrapper.vue  | 19 +++++++++++++++----
 .../work_item_links/work_item_links.vue       |  2 ++
 .../work_item_links/work_item_tree.vue        |  2 ++
 .../work_item_relationships.vue               |  8 +++++++-
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/work_items/components/widget_wrapper.vue b/app/assets/javascripts/work_items/components/widget_wrapper.vue
index f343f78735817a..27de858fe4eabd 100644
--- a/app/assets/javascripts/work_items/components/widget_wrapper.vue
+++ b/app/assets/javascripts/work_items/components/widget_wrapper.vue
@@ -14,6 +14,11 @@ export default {
       required: false,
       default: '',
     },
+    widgetName: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -30,6 +35,12 @@ export default {
     isOpenString() {
       return this.isOpen ? 'true' : 'false';
     },
+    anchorLink() {
+      return `#${this.widgetName}`;
+    },
+    anchorLinkId() {
+      return `user-content-${this.widgetName}-links`;
+    },
   },
   methods: {
     hide() {
@@ -46,14 +57,14 @@ export default {
 </script>
 
 <template>
-  <div id="tasks" class="gl-new-card" :aria-expanded="isOpenString">
+  <div :id="widgetName" class="gl-new-card" :aria-expanded="isOpenString">
     <div class="gl-new-card-header">
       <div class="gl-new-card-title-wrapper">
         <h3 class="gl-new-card-title">
           <gl-link
-            id="user-content-tasks-links"
-            class="anchor position-absolute gl-text-decoration-none"
-            href="#tasks"
+            :id="anchorLinkId"
+            class="gl-text-decoration-none"
+            :href="anchorLink"
             aria-hidden="true"
           />
           <slot name="header"></slot>
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
index 445a20e26e2e5a..eb836007e75b26 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
@@ -103,6 +103,7 @@ export default {
       isReportDrawerOpen: false,
       reportedUserId: 0,
       reportedUrl: '',
+      widgetName: 'tasks',
     };
   },
   computed: {
@@ -205,6 +206,7 @@ export default {
   <widget-wrapper
     ref="wrapper"
     :error="error"
+    :widget-name="widgetName"
     data-testid="work-item-links"
     @dismissAlert="error = undefined"
   >
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue
index 246eac82c78411..bc3f5201fb8fc3 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue
@@ -64,6 +64,7 @@ export default {
       isShownAddForm: false,
       formType: null,
       childType: null,
+      widgetName: 'tasks',
     };
   },
   computed: {
@@ -101,6 +102,7 @@ export default {
 <template>
   <widget-wrapper
     ref="wrapper"
+    :widget-name="widgetName"
     :error="error"
     data-testid="work-item-tree"
     @dismissAlert="error = undefined"
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 ad62f5995a08dc..4f6879e9605f4f 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
@@ -74,6 +74,7 @@ export default {
       linksRelatesTo: [],
       linksIsBlockedBy: [],
       linksBlocks: [],
+      widgetName: 'linkeditems',
     };
   },
   computed: {
@@ -112,7 +113,12 @@ export default {
 };
 </script>
 <template>
-  <widget-wrapper :error="error" class="work-item-relationships" @dismissAlert="error = undefined">
+  <widget-wrapper
+    :error="error"
+    class="work-item-relationships"
+    :widget-name="widgetName"
+    @dismissAlert="error = undefined"
+  >
     <template #header>
       <div class="gl-new-card-title-wrapper">
         <h3 class="gl-new-card-title">
-- 
GitLab