From 54fc3af5e9fb87444c887f4f6ac1840f45426bdd Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Tue, 1 Aug 2023 13:59:53 +0530
Subject: [PATCH 1/2] Extract Work item contents and create a wrapper

The work item contents in work item hierarchy contains common
elements between hierarchy and relationship widget. Extract
the common elements and create a wrapper to use them in both
widgets

Changelog: other
EE: true
---
 .../shared/work_item_link_child_contents.vue  | 198 ++++++++++++++++++
 .../work_item_link_child_metadata.vue         |   0
 .../work_item_links_menu.vue                  |   0
 .../work_item_links/work_item_link_child.vue  | 130 ++----------
 .../work_item_link_child_metadata.vue         |   2 +-
 .../work_item_link_child_metadata_spec.js     |   2 +-
 .../work_item_link_child_contents_spec.js     | 182 ++++++++++++++++
 .../work_item_link_child_metadata_spec.js     |   2 +-
 .../work_item_links_menu_spec.js              |   2 +-
 .../work_item_link_child_spec.js              | 169 ++-------------
 10 files changed, 418 insertions(+), 269 deletions(-)
 create mode 100644 app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
 rename app/assets/javascripts/work_items/components/{work_item_links => shared}/work_item_link_child_metadata.vue (100%)
 rename app/assets/javascripts/work_items/components/{work_item_links => shared}/work_item_links_menu.vue (100%)
 rename ee/app/assets/javascripts/work_items/components/{work_item_links => shared}/work_item_link_child_metadata.vue (96%)
 rename ee/spec/frontend/work_items/components/{work_item_links => shared}/work_item_link_child_metadata_spec.js (98%)
 create mode 100644 spec/frontend/work_items/components/shared/work_item_link_child_contents_spec.js
 rename spec/frontend/work_items/components/{work_item_links => shared}/work_item_link_child_metadata_spec.js (93%)
 rename spec/frontend/work_items/components/{work_item_links => shared}/work_item_links_menu_spec.js (89%)

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
new file mode 100644
index 00000000000000..180f44e6e22adc
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
@@ -0,0 +1,198 @@
+<script>
+import { GlLabel, GlLink, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { isScopedLabel } from '~/lib/utils/common_utils';
+import RichTimestampTooltip from '~/vue_shared/components/rich_timestamp_tooltip.vue';
+import WorkItemLinkChildMetadata from 'ee_else_ce/work_items/components/shared/work_item_link_child_metadata.vue';
+import {
+  STATE_OPEN,
+  TASK_TYPE_NAME,
+  WIDGET_TYPE_PROGRESS,
+  WIDGET_TYPE_HIERARCHY,
+  WIDGET_TYPE_HEALTH_STATUS,
+  WIDGET_TYPE_MILESTONE,
+  WIDGET_TYPE_ASSIGNEES,
+  WIDGET_TYPE_LABELS,
+  WORK_ITEM_NAME_TO_ICON_MAP,
+} from '../../constants';
+import WorkItemLinksMenu from './work_item_links_menu.vue';
+
+export default {
+  i18n: {
+    confidential: __('Confidential'),
+    created: __('Created'),
+    closed: __('Closed'),
+  },
+  components: {
+    GlLabel,
+    GlLink,
+    GlIcon,
+    RichTimestampTooltip,
+    WorkItemLinkChildMetadata,
+    WorkItemLinksMenu,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    childItem: {
+      type: Object,
+      required: true,
+    },
+    canUpdate: {
+      type: Boolean,
+      required: true,
+    },
+    parentWorkItemId: {
+      type: String,
+      required: true,
+    },
+    workItemType: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    childPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    labels() {
+      return this.metadataWidgets[WIDGET_TYPE_LABELS]?.labels?.nodes || [];
+    },
+    metadataWidgets() {
+      return this.childItem.widgets?.reduce((metadataWidgets, widget) => {
+        // Skip Hierarchy widget as it is not part of metadata.
+        if (widget.type && widget.type !== WIDGET_TYPE_HIERARCHY) {
+          // eslint-disable-next-line no-param-reassign
+          metadataWidgets[widget.type] = widget;
+        }
+        return metadataWidgets;
+      }, {});
+    },
+    allowsScopedLabels() {
+      return this.metadataWidgets[WIDGET_TYPE_LABELS]?.allowsScopedLabels;
+    },
+    isChildItemOpen() {
+      return this.childItem.state === STATE_OPEN;
+    },
+    iconName() {
+      if (this.childItemType === TASK_TYPE_NAME) {
+        return this.isChildItemOpen ? 'issue-open-m' : 'issue-close';
+      }
+      return WORK_ITEM_NAME_TO_ICON_MAP[this.childItemType];
+    },
+    childItemType() {
+      return this.childItem.workItemType.name;
+    },
+    iconClass() {
+      if (this.childItemType === TASK_TYPE_NAME) {
+        return this.isChildItemOpen ? 'gl-text-green-500' : 'gl-text-blue-500';
+      }
+      return '';
+    },
+    stateTimestamp() {
+      return this.isChildItemOpen ? this.childItem.createdAt : this.childItem.closedAt;
+    },
+    stateTimestampTypeText() {
+      return this.isChildItemOpen ? this.$options.i18n.created : this.$options.i18n.closed;
+    },
+    hasMetadata() {
+      if (this.metadataWidgets) {
+        return (
+          Number.isInteger(this.metadataWidgets[WIDGET_TYPE_PROGRESS]?.progress) ||
+          Boolean(this.metadataWidgets[WIDGET_TYPE_HEALTH_STATUS]?.healthStatus) ||
+          Boolean(this.metadataWidgets[WIDGET_TYPE_MILESTONE]?.milestone) ||
+          this.metadataWidgets[WIDGET_TYPE_ASSIGNEES]?.assignees?.nodes.length > 0 ||
+          this.metadataWidgets[WIDGET_TYPE_LABELS]?.labels?.nodes.length > 0
+        );
+      }
+      return false;
+    },
+  },
+  methods: {
+    showScopedLabel(label) {
+      return isScopedLabel(label) && this.allowsScopedLabels;
+    },
+  },
+};
+</script>
+
+<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"
+    data-testid="links-child"
+  >
+    <div class="item-contents gl-display-flex gl-flex-grow-1 gl-flex-wrap gl-min-w-0">
+      <div
+        class="gl-display-flex gl-flex-grow-1 gl-flex-wrap flex-xl-nowrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-min-w-0"
+      >
+        <div class="item-title gl-display-flex gl-gap-3 gl-min-w-0">
+          <span
+            :id="`stateIcon-${childItem.id}`"
+            class="gl-cursor-help"
+            data-testid="item-status-icon"
+          >
+            <gl-icon
+              class="gl-text-secondary"
+              :class="iconClass"
+              :name="iconName"
+              :aria-label="stateTimestampTypeText"
+            />
+          </span>
+          <rich-timestamp-tooltip
+            :target="`stateIcon-${childItem.id}`"
+            :raw-timestamp="stateTimestamp"
+            :timestamp-type-text="stateTimestampTypeText"
+          />
+          <span v-if="childItem.confidential">
+            <gl-icon
+              v-gl-tooltip.top
+              name="eye-slash"
+              class="gl-text-orange-500"
+              data-testid="confidential-icon"
+              :aria-label="$options.i18n.confidential"
+              :title="$options.i18n.confidential"
+            />
+          </span>
+          <gl-link
+            :href="childPath"
+            class="gl-text-truncate gl-text-black-normal! gl-font-weight-semibold"
+            data-testid="item-title"
+            @click="$emit('click', $event)"
+            @mouseover="$emit('mouseover')"
+            @mouseout="$emit('mouseout')"
+          >
+            {{ childItem.title }}
+          </gl-link>
+        </div>
+        <work-item-link-child-metadata
+          v-if="hasMetadata"
+          :metadata-widgets="metadataWidgets"
+          class="gl-ml-6 ml-xl-0"
+        />
+      </div>
+      <div v-if="labels.length" class="gl-display-flex gl-flex-wrap gl-flex-basis-full gl-ml-6">
+        <gl-label
+          v-for="label in labels"
+          :key="label.id"
+          :title="label.title"
+          :background-color="label.color"
+          :description="label.description"
+          :scoped="showScopedLabel(label)"
+          class="gl-my-2 gl-mr-2 gl-mb-auto gl-label-sm"
+          tooltip-placement="top"
+        />
+      </div>
+    </div>
+    <div v-if="canUpdate" class="gl-ml-0 gl-sm-ml-auto! gl-display-inline-flex">
+      <work-item-links-menu
+        :work-item-id="childItem.id"
+        :parent-work-item-id="parentWorkItemId"
+        data-testid="links-menu"
+        @removeChild="$emit('removeChild', childItem)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child_metadata.vue b/app/assets/javascripts/work_items/components/shared/work_item_link_child_metadata.vue
similarity index 100%
rename from app/assets/javascripts/work_items/components/work_item_links/work_item_link_child_metadata.vue
rename to app/assets/javascripts/work_items/components/shared/work_item_link_child_metadata.vue
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_links_menu.vue b/app/assets/javascripts/work_items/components/shared/work_item_links_menu.vue
similarity index 100%
rename from app/assets/javascripts/work_items/components/work_item_links/work_item_links_menu.vue
rename to app/assets/javascripts/work_items/components/shared/work_item_links_menu.vue
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 ec44a654e89993..a9b0c2b98bf91e 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
@@ -1,39 +1,27 @@
 <script>
-import { GlButton, GlLabel, GlLink, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { cloneDeep } from 'lodash';
 import * as Sentry from '@sentry/browser';
 import { __, s__ } from '~/locale';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import { createAlert } from '~/alert';
-import RichTimestampTooltip from '~/vue_shared/components/rich_timestamp_tooltip.vue';
-import WorkItemLinkChildMetadata from 'ee_else_ce/work_items/components/work_item_links/work_item_link_child_metadata.vue';
 import updateWorkItemMutation from '../../graphql/update_work_item.mutation.graphql';
 import {
   STATE_OPEN,
   TASK_TYPE_NAME,
   WORK_ITEM_TYPE_VALUE_OBJECTIVE,
-  WIDGET_TYPE_PROGRESS,
-  WIDGET_TYPE_HEALTH_STATUS,
-  WIDGET_TYPE_MILESTONE,
   WIDGET_TYPE_HIERARCHY,
-  WIDGET_TYPE_ASSIGNEES,
-  WIDGET_TYPE_LABELS,
   WORK_ITEM_NAME_TO_ICON_MAP,
 } from '../../constants';
 import getWorkItemTreeQuery from '../../graphql/work_item_tree.query.graphql';
-import WorkItemLinksMenu from './work_item_links_menu.vue';
+import WorkItemLinkChildContents from '../shared/work_item_link_child_contents.vue';
 import WorkItemTreeChildren from './work_item_tree_children.vue';
 
 export default {
   components: {
-    GlLabel,
-    GlLink,
     GlButton,
-    GlIcon,
-    RichTimestampTooltip,
-    WorkItemLinkChildMetadata,
-    WorkItemLinksMenu,
     WorkItemTreeChildren,
+    WorkItemLinkChildContents,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -74,25 +62,9 @@ export default {
     };
   },
   computed: {
-    labels() {
-      return this.metadataWidgets[WIDGET_TYPE_LABELS]?.labels?.nodes || [];
-    },
-    allowsScopedLabels() {
-      return this.metadataWidgets[WIDGET_TYPE_LABELS]?.allowsScopedLabels;
-    },
     canHaveChildren() {
       return this.workItemType === WORK_ITEM_TYPE_VALUE_OBJECTIVE;
     },
-    metadataWidgets() {
-      return this.childItem.widgets?.reduce((metadataWidgets, widget) => {
-        // Skip Hierarchy widget as it is not part of metadata.
-        if (widget.type && widget.type !== WIDGET_TYPE_HIERARCHY) {
-          // eslint-disable-next-line no-param-reassign
-          metadataWidgets[widget.type] = widget;
-        }
-        return metadataWidgets;
-      }, {});
-    },
     isItemOpen() {
       return this.childItem.state === STATE_OPEN;
     },
@@ -126,18 +98,6 @@ export default {
     chevronTooltip() {
       return this.isExpanded ? __('Collapse') : __('Expand');
     },
-    hasMetadata() {
-      if (this.metadataWidgets) {
-        return (
-          Number.isInteger(this.metadataWidgets[WIDGET_TYPE_PROGRESS]?.progress) ||
-          Boolean(this.metadataWidgets[WIDGET_TYPE_HEALTH_STATUS]?.healthStatus) ||
-          Boolean(this.metadataWidgets[WIDGET_TYPE_MILESTONE]?.milestone) ||
-          this.metadataWidgets[WIDGET_TYPE_ASSIGNEES]?.assignees?.nodes.length > 0 ||
-          this.metadataWidgets[WIDGET_TYPE_LABELS]?.labels?.nodes.length > 0
-        );
-      }
-      return false;
-    },
   },
   watch: {
     childItem: {
@@ -270,81 +230,15 @@ export default {
         data-testid="expand-child"
         @click="toggleItem"
       />
-      <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"
-        data-testid="links-child"
-      >
-        <div class="item-contents gl-display-flex gl-flex-grow-1 gl-flex-wrap gl-min-w-0">
-          <div
-            class="gl-display-flex gl-flex-grow-1 gl-flex-wrap flex-xl-nowrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-min-w-0"
-          >
-            <div class="item-title gl-display-flex gl-gap-3 gl-min-w-0">
-              <span
-                :id="`stateIcon-${childItem.id}`"
-                class="gl-cursor-help"
-                data-testid="item-status-icon"
-              >
-                <gl-icon
-                  class="gl-text-secondary"
-                  :class="iconClass"
-                  :name="iconName"
-                  :aria-label="stateTimestampTypeText"
-                />
-              </span>
-              <rich-timestamp-tooltip
-                :target="`stateIcon-${childItem.id}`"
-                :raw-timestamp="stateTimestamp"
-                :timestamp-type-text="stateTimestampTypeText"
-              />
-              <span v-if="childItem.confidential">
-                <gl-icon
-                  v-gl-tooltip.top
-                  name="eye-slash"
-                  class="gl-text-orange-500"
-                  data-testid="confidential-icon"
-                  :aria-label="__('Confidential')"
-                  :title="__('Confidential')"
-                />
-              </span>
-              <gl-link
-                :href="childPath"
-                class="gl-text-truncate gl-text-black-normal! gl-font-weight-semibold"
-                data-testid="item-title"
-                @click="$emit('click', $event)"
-                @mouseover="$emit('mouseover')"
-                @mouseout="$emit('mouseout')"
-              >
-                {{ childItem.title }}
-              </gl-link>
-            </div>
-            <work-item-link-child-metadata
-              v-if="hasMetadata"
-              :metadata-widgets="metadataWidgets"
-              class="gl-ml-6 ml-xl-0"
-            />
-          </div>
-          <div v-if="labels.length" class="gl-display-flex gl-flex-wrap gl-flex-basis-full gl-ml-6">
-            <gl-label
-              v-for="label in labels"
-              :key="label.id"
-              :title="label.title"
-              :background-color="label.color"
-              :description="label.description"
-              :scoped="showScopedLabel(label)"
-              class="gl-my-2 gl-mr-2 gl-mb-auto gl-label-sm"
-              tooltip-placement="top"
-            />
-          </div>
-        </div>
-        <div v-if="canUpdate" class="gl-ml-0 gl-sm-ml-auto! gl-display-inline-flex">
-          <work-item-links-menu
-            :work-item-id="childItem.id"
-            :parent-work-item-id="issuableGid"
-            data-testid="links-menu"
-            @removeChild="$emit('removeChild', childItem)"
-          />
-        </div>
-      </div>
+      <work-item-link-child-contents
+        :child-item="childItem"
+        :can-update="canUpdate"
+        :parent-work-item-id="issuableGid"
+        :work-item-type="workItemType"
+        :child-path="childPath"
+        @click="$emit('click', $event)"
+        @removeChild="$emit('removeChild', childItem)"
+      />
     </div>
     <work-item-tree-children
       v-if="isExpanded"
diff --git a/ee/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child_metadata.vue b/ee/app/assets/javascripts/work_items/components/shared/work_item_link_child_metadata.vue
similarity index 96%
rename from ee/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child_metadata.vue
rename to ee/app/assets/javascripts/work_items/components/shared/work_item_link_child_metadata.vue
index 7d362ae153a8ca..546cd8eecee750 100644
--- a/ee/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child_metadata.vue
+++ b/ee/app/assets/javascripts/work_items/components/shared/work_item_link_child_metadata.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlIcon, GlBadge, GlTooltip, GlTooltipDirective } from '@gitlab/ui';
-import WorkItemLinkChildMetadata from '~/work_items/components/work_item_links/work_item_link_child_metadata.vue';
+import WorkItemLinkChildMetadata from '~/work_items/components/shared/work_item_link_child_metadata.vue';
 import { WIDGET_TYPE_PROGRESS, WIDGET_TYPE_HEALTH_STATUS } from '~/work_items/constants';
 import { healthStatusTextMap } from 'ee/sidebar/constants';
 import { issueHealthStatusVariantMapping } from 'ee/related_items_tree/constants';
diff --git a/ee/spec/frontend/work_items/components/work_item_links/work_item_link_child_metadata_spec.js b/ee/spec/frontend/work_items/components/shared/work_item_link_child_metadata_spec.js
similarity index 98%
rename from ee/spec/frontend/work_items/components/work_item_links/work_item_link_child_metadata_spec.js
rename to ee/spec/frontend/work_items/components/shared/work_item_link_child_metadata_spec.js
index 9be20fb4b329f9..2e63452dee12e8 100644
--- a/ee/spec/frontend/work_items/components/work_item_links/work_item_link_child_metadata_spec.js
+++ b/ee/spec/frontend/work_items/components/shared/work_item_link_child_metadata_spec.js
@@ -2,7 +2,7 @@ import { GlIcon, GlBadge, GlTooltip } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { formatDate } from '~/lib/utils/datetime_utility';
-import WorkItemLinkChildMetadata from 'ee/work_items/components/work_item_links/work_item_link_child_metadata.vue';
+import WorkItemLinkChildMetadata from 'ee/work_items/components/shared/work_item_link_child_metadata.vue';
 import { healthStatusTextMap } from 'ee/sidebar/constants';
 import { issueHealthStatusVariantMapping } from 'ee/related_items_tree/constants';
 
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
new file mode 100644
index 00000000000000..9c8fa321dbabfe
--- /dev/null
+++ b/spec/frontend/work_items/components/shared/work_item_link_child_contents_spec.js
@@ -0,0 +1,182 @@
+import { GlLabel, GlIcon } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+import WorkItemLinkChildMetadata from 'ee_else_ce/work_items/components/shared/work_item_link_child_metadata.vue';
+
+import { createAlert } from '~/alert';
+import RichTimestampTooltip from '~/vue_shared/components/rich_timestamp_tooltip.vue';
+
+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 {
+  workItemTask,
+  workItemObjectiveWithChild,
+  workItemObjectiveNoMetadata,
+  confidentialWorkItemTask,
+  closedWorkItemTask,
+  workItemObjectiveMetadataWidgets,
+} from '../../mock_data';
+
+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);
+  const findConfidentialIconComponent = () => wrapper.findByTestId('confidential-icon');
+  const findTitleEl = () => wrapper.findByTestId('item-title');
+  const findStatusTooltipComponent = () => wrapper.findComponent(RichTimestampTooltip);
+  const findMetadataComponent = () => wrapper.findComponent(WorkItemLinkChildMetadata);
+  const findAllLabels = () => wrapper.findAllComponents(GlLabel);
+  const findRegularLabel = () => findAllLabels().at(0);
+  const findScopedLabel = () => findAllLabels().at(1);
+  const findLinksMenuComponent = () => wrapper.findComponent(WorkItemLinksMenu);
+
+  const createComponent = ({
+    canUpdate = true,
+    parentWorkItemId = WORK_ITEM_ID,
+    childItem = workItemTask,
+    workItemType = TASK_TYPE_NAME,
+  } = {}) => {
+    wrapper = shallowMountExtended(WorkItemLinkChildContents, {
+      propsData: {
+        canUpdate,
+        parentWorkItemId,
+        childItem,
+        workItemType,
+        fullPath: mockFullPath,
+        childPath: '/gitlab-org/gitlab-test/-/work_items/4',
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createAlert.mockClear();
+  });
+
+  it.each`
+    status      | childItem             | statusIconName    | statusIconColorClass   | rawTimestamp                   | tooltipContents
+    ${'open'}   | ${workItemTask}       | ${'issue-open-m'} | ${'gl-text-green-500'} | ${workItemTask.createdAt}      | ${'Created'}
+    ${'closed'} | ${closedWorkItemTask} | ${'issue-close'}  | ${'gl-text-blue-500'}  | ${closedWorkItemTask.closedAt} | ${'Closed'}
+  `(
+    'renders item status icon and tooltip when item status is `$status`',
+    ({ childItem, statusIconName, statusIconColorClass, rawTimestamp, tooltipContents }) => {
+      createComponent({ childItem });
+
+      expect(findStatusIconComponent().props('name')).toBe(statusIconName);
+      expect(findStatusIconComponent().classes()).toContain(statusIconColorClass);
+      expect(findStatusTooltipComponent().props('rawTimestamp')).toBe(rawTimestamp);
+      expect(findStatusTooltipComponent().props('timestampTypeText')).toContain(tooltipContents);
+    },
+  );
+
+  it('renders confidential icon when item is confidential', () => {
+    createComponent({ childItem: confidentialWorkItemTask });
+
+    expect(findConfidentialIconComponent().props('name')).toBe('eye-slash');
+    expect(findConfidentialIconComponent().attributes('title')).toBe('Confidential');
+  });
+
+  describe('item title', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders item title', () => {
+      expect(findTitleEl().attributes('href')).toBe('/gitlab-org/gitlab-test/-/work_items/4');
+      expect(findTitleEl().text()).toBe(workItemTask.title);
+    });
+
+    it.each`
+      action            | event          | emittedEvent
+      ${'on mouseover'} | ${'mouseover'} | ${'mouseover'}
+      ${'on mouseout'}  | ${'mouseout'}  | ${'mouseout'}
+    `('$action item title emit `$emittedEvent` event', ({ event, emittedEvent }) => {
+      findTitleEl().vm.$emit(event);
+
+      expect(wrapper.emitted(emittedEvent)).toEqual([[]]);
+    });
+
+    it('emits click event with correct parameters on clicking title', () => {
+      const eventObj = {
+        preventDefault: jest.fn(),
+      };
+      findTitleEl().vm.$emit('click', eventObj);
+
+      expect(wrapper.emitted('click')).toEqual([[eventObj]]);
+    });
+  });
+
+  describe('item metadata', () => {
+    beforeEach(() => {
+      createComponent({
+        childItem: workItemObjectiveWithChild,
+        workItemType: WORK_ITEM_TYPE_VALUE_OBJECTIVE,
+      });
+    });
+
+    it('renders item metadata component when item has metadata present', () => {
+      expect(findMetadataComponent().props()).toMatchObject({
+        metadataWidgets: workItemObjectiveMetadataWidgets,
+      });
+    });
+
+    it('does not render item metadata component when item has no metadata present', () => {
+      createComponent({
+        childItem: workItemObjectiveNoMetadata,
+        workItemType: WORK_ITEM_TYPE_VALUE_OBJECTIVE,
+      });
+
+      expect(findMetadataComponent().exists()).toBe(false);
+    });
+
+    it('renders labels', () => {
+      const mockLabel = mockLabels[0];
+
+      expect(findAllLabels()).toHaveLength(mockLabels.length);
+      expect(findRegularLabel().props()).toMatchObject({
+        title: mockLabel.title,
+        backgroundColor: mockLabel.color,
+        description: mockLabel.description,
+        scoped: false,
+      });
+      expect(findScopedLabel().props('scoped')).toBe(true); // Second label is scoped
+    });
+  });
+
+  describe('item menu', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders work-item-links-menu', () => {
+      expect(findLinksMenuComponent().attributes()).toMatchObject({
+        'work-item-id': workItemTask.id,
+        'parent-work-item-id': WORK_ITEM_ID,
+      });
+    });
+
+    it('does not render work-item-links-menu when canUpdate is false', () => {
+      createComponent({ canUpdate: false });
+
+      expect(findLinksMenuComponent().exists()).toBe(false);
+    });
+
+    it('removeChild event on menu triggers `click-remove-child` event', () => {
+      findLinksMenuComponent().vm.$emit('removeChild');
+
+      expect(wrapper.emitted('removeChild')).toEqual([[workItemTask]]);
+    });
+  });
+});
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_link_child_metadata_spec.js b/spec/frontend/work_items/components/shared/work_item_link_child_metadata_spec.js
similarity index 93%
rename from spec/frontend/work_items/components/work_item_links/work_item_link_child_metadata_spec.js
rename to spec/frontend/work_items/components/shared/work_item_link_child_metadata_spec.js
index 07efb1c5ac87ca..25ef0e69a40250 100644
--- a/spec/frontend/work_items/components/work_item_links/work_item_link_child_metadata_spec.js
+++ b/spec/frontend/work_items/components/shared/work_item_link_child_metadata_spec.js
@@ -3,7 +3,7 @@ import { GlAvatarsInline } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 import ItemMilestone from '~/issuable/components/issue_milestone.vue';
-import WorkItemLinkChildMetadata from '~/work_items/components/work_item_links/work_item_link_child_metadata.vue';
+import WorkItemLinkChildMetadata from '~/work_items/components/shared/work_item_link_child_metadata.vue';
 
 import { workItemObjectiveMetadataWidgets } from '../../mock_data';
 
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_links_menu_spec.js b/spec/frontend/work_items/components/shared/work_item_links_menu_spec.js
similarity index 89%
rename from spec/frontend/work_items/components/work_item_links/work_item_links_menu_spec.js
rename to spec/frontend/work_items/components/shared/work_item_links_menu_spec.js
index f02a9fbd021aaf..721db6c3315994 100644
--- a/spec/frontend/work_items/components/work_item_links/work_item_links_menu_spec.js
+++ b/spec/frontend/work_items/components/shared/work_item_links_menu_spec.js
@@ -1,7 +1,7 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import WorkItemLinksMenu from '~/work_items/components/work_item_links/work_item_links_menu.vue';
+import WorkItemLinksMenu from '~/work_items/components/shared/work_item_links_menu.vue';
 
 describe('WorkItemLinksMenu', () => {
   let wrapper;
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js
index 71d1a0e253f705..803ff950cbe554 100644
--- a/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js
+++ b/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js
@@ -1,20 +1,16 @@
-import { GlLabel, GlIcon } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 
-import WorkItemLinkChildMetadata from 'ee_else_ce/work_items/components/work_item_links/work_item_link_child_metadata.vue';
-
 import { createAlert } from '~/alert';
-import RichTimestampTooltip from '~/vue_shared/components/rich_timestamp_tooltip.vue';
 
 import getWorkItemTreeQuery from '~/work_items/graphql/work_item_tree.query.graphql';
 import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
 import WorkItemLinkChild from '~/work_items/components/work_item_links/work_item_link_child.vue';
-import WorkItemLinksMenu from '~/work_items/components/work_item_links/work_item_links_menu.vue';
 import WorkItemTreeChildren from '~/work_items/components/work_item_links/work_item_tree_children.vue';
+import WorkItemLinkChildContents from '~/work_items/components/shared/work_item_link_child_contents.vue';
 import {
   WIDGET_TYPE_HIERARCHY,
   TASK_TYPE_NAME,
@@ -24,12 +20,8 @@ import {
 import {
   workItemTask,
   workItemObjectiveWithChild,
-  workItemObjectiveNoMetadata,
-  confidentialWorkItemTask,
-  closedWorkItemTask,
   workItemHierarchyTreeResponse,
   workItemHierarchyTreeFailureResponse,
-  workItemObjectiveMetadataWidgets,
   changeIndirectWorkItemParentMutationResponse,
   workItemUpdateFailureResponse,
 } from '../../mock_data';
@@ -41,8 +33,6 @@ describe('WorkItemLinkChild', () => {
   let wrapper;
   let getWorkItemTreeQueryHandler;
   let mutationChangeParentHandler;
-  const { LABELS } = workItemObjectiveMetadataWidgets;
-  const mockLabels = LABELS.labels.nodes;
 
   const $toast = {
     show: jest.fn(),
@@ -51,6 +41,8 @@ describe('WorkItemLinkChild', () => {
 
   Vue.use(VueApollo);
 
+  const findWorkItemLinkChildContents = () => wrapper.findComponent(WorkItemLinkChildContents);
+
   const createComponent = ({
     canUpdate = true,
     issuableGid = WORK_ITEM_ID,
@@ -89,87 +81,7 @@ describe('WorkItemLinkChild', () => {
     createAlert.mockClear();
   });
 
-  it.each`
-    status      | childItem             | statusIconName    | statusIconColorClass   | rawTimestamp                   | tooltipContents
-    ${'open'}   | ${workItemTask}       | ${'issue-open-m'} | ${'gl-text-green-500'} | ${workItemTask.createdAt}      | ${'Created'}
-    ${'closed'} | ${closedWorkItemTask} | ${'issue-close'}  | ${'gl-text-blue-500'}  | ${closedWorkItemTask.closedAt} | ${'Closed'}
-  `(
-    'renders item status icon and tooltip when item status is `$status`',
-    ({ childItem, statusIconName, statusIconColorClass, rawTimestamp, tooltipContents }) => {
-      createComponent({ childItem });
-
-      const statusIcon = wrapper.findByTestId('item-status-icon').findComponent(GlIcon);
-      const statusTooltip = wrapper.findComponent(RichTimestampTooltip);
-
-      expect(statusIcon.props('name')).toBe(statusIconName);
-      expect(statusIcon.classes()).toContain(statusIconColorClass);
-      expect(statusTooltip.props('rawTimestamp')).toBe(rawTimestamp);
-      expect(statusTooltip.props('timestampTypeText')).toContain(tooltipContents);
-    },
-  );
-
-  it('renders confidential icon when item is confidential', () => {
-    createComponent({ childItem: confidentialWorkItemTask });
-
-    const confidentialIcon = wrapper.findByTestId('confidential-icon');
-
-    expect(confidentialIcon.props('name')).toBe('eye-slash');
-    expect(confidentialIcon.attributes('title')).toBe('Confidential');
-  });
-
-  describe('item title', () => {
-    let titleEl;
-
-    beforeEach(() => {
-      createComponent();
-
-      titleEl = wrapper.findByTestId('item-title');
-    });
-
-    it('renders item title', () => {
-      expect(titleEl.attributes('href')).toBe('/gitlab-org/gitlab-test/-/work_items/4');
-      expect(titleEl.text()).toBe(workItemTask.title);
-    });
-
-    describe('renders item title correctly for relative instance', () => {
-      beforeEach(() => {
-        window.gon = { relative_url_root: '/test' };
-        createComponent();
-        titleEl = wrapper.findByTestId('item-title');
-      });
-
-      it('renders item title with correct href', () => {
-        expect(titleEl.attributes('href')).toBe('/test/gitlab-org/gitlab-test/-/work_items/4');
-      });
-
-      it('renders item title with correct text', () => {
-        expect(titleEl.text()).toBe(workItemTask.title);
-      });
-    });
-
-    it.each`
-      action                  | event          | emittedEvent
-      ${'doing mouseover on'} | ${'mouseover'} | ${'mouseover'}
-      ${'doing mouseout on'}  | ${'mouseout'}  | ${'mouseout'}
-    `('$action item title emit `$emittedEvent` event', ({ event, emittedEvent }) => {
-      titleEl.vm.$emit(event);
-
-      expect(wrapper.emitted(emittedEvent)).toEqual([[]]);
-    });
-
-    it('emits click event with correct parameters on clicking title', () => {
-      const eventObj = {
-        preventDefault: jest.fn(),
-      };
-      titleEl.vm.$emit('click', eventObj);
-
-      expect(wrapper.emitted('click')).toEqual([[eventObj]]);
-    });
-  });
-
-  describe('item metadata', () => {
-    const findMetadataComponent = () => wrapper.findComponent(WorkItemLinkChildMetadata);
-
+  describe('renders WorkItemLinkChildContents', () => {
     beforeEach(() => {
       createComponent({
         childItem: workItemObjectiveWithChild,
@@ -177,67 +89,31 @@ describe('WorkItemLinkChild', () => {
       });
     });
 
-    it('renders item metadata component when item has metadata present', () => {
-      const metadataEl = findMetadataComponent();
-      expect(metadataEl.exists()).toBe(true);
-      expect(metadataEl.props()).toMatchObject({
-        metadataWidgets: workItemObjectiveMetadataWidgets,
-      });
-    });
-
-    it('does not render item metadata component when item has no metadata present', () => {
-      createComponent({
-        childItem: workItemObjectiveNoMetadata,
-        workItemType: WORK_ITEM_TYPE_VALUE_OBJECTIVE,
+    it('with default props', () => {
+      expect(findWorkItemLinkChildContents().props()).toEqual({
+        childItem: workItemObjectiveWithChild,
+        canUpdate: true,
+        parentWorkItemId: 'gid://gitlab/WorkItem/2',
+        workItemType: 'Objective',
+        childPath: '/gitlab-org/gitlab-test/-/work_items/12',
       });
-
-      expect(findMetadataComponent().exists()).toBe(false);
     });
 
-    it('renders labels', () => {
-      const labels = wrapper.findAllComponents(GlLabel);
-      const mockLabel = mockLabels[0];
-
-      expect(labels).toHaveLength(mockLabels.length);
-      expect(labels.at(0).props()).toMatchObject({
-        title: mockLabel.title,
-        backgroundColor: mockLabel.color,
-        description: mockLabel.description,
-        scoped: false,
+    describe('with relative instance', () => {
+      beforeEach(() => {
+        window.gon = { relative_url_root: '/test' };
+        createComponent({
+          childItem: workItemObjectiveWithChild,
+          workItemType: WORK_ITEM_TYPE_VALUE_OBJECTIVE,
+        });
       });
-      expect(labels.at(1).props('scoped')).toBe(true); // Second label is scoped
-    });
-  });
-
-  describe('item menu', () => {
-    let itemMenuEl;
-
-    beforeEach(() => {
-      createComponent();
-
-      itemMenuEl = wrapper.findComponent(WorkItemLinksMenu);
-    });
 
-    it('renders work-item-links-menu', () => {
-      expect(itemMenuEl.exists()).toBe(true);
-
-      expect(itemMenuEl.attributes()).toMatchObject({
-        'work-item-id': workItemTask.id,
-        'parent-work-item-id': WORK_ITEM_ID,
+      it('adds the relative url to child path value', () => {
+        expect(findWorkItemLinkChildContents().props('childPath')).toBe(
+          '/test/gitlab-org/gitlab-test/-/work_items/12',
+        );
       });
     });
-
-    it('does not render work-item-links-menu when canUpdate is false', () => {
-      createComponent({ canUpdate: false });
-
-      expect(wrapper.findComponent(WorkItemLinksMenu).exists()).toBe(false);
-    });
-
-    it('removeChild event on menu triggers `click-remove-child` event', () => {
-      itemMenuEl.vm.$emit('removeChild');
-
-      expect(wrapper.emitted('removeChild')).toEqual([[workItemTask]]);
-    });
   });
 
   describe('nested children', () => {
@@ -252,7 +128,6 @@ describe('WorkItemLinkChild', () => {
     const findFirstItem = () => getChildrenNodes()[0];
 
     beforeEach(() => {
-      getWorkItemTreeQueryHandler.mockClear();
       createComponent({
         childItem: workItemObjectiveWithChild,
         workItemType: WORK_ITEM_TYPE_VALUE_OBJECTIVE,
-- 
GitLab


From d6b065c83634267e74f5778b2dc180ecee75aef5 Mon Sep 17 00:00:00 2001
From: Rajan Mistry <rmistry@gitlab.com>
Date: Tue, 8 Aug 2023 15:42:31 +0530
Subject: [PATCH 2/2] Remove unwanted props from links menu component

---
 .../components/shared/work_item_link_child_contents.vue      | 2 --
 .../components/shared/work_item_link_child_contents_spec.js  | 5 +----
 2 files changed, 1 insertion(+), 6 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 180f44e6e22adc..0a38dcb77f67d3 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
@@ -188,8 +188,6 @@ export default {
     </div>
     <div v-if="canUpdate" class="gl-ml-0 gl-sm-ml-auto! gl-display-inline-flex">
       <work-item-links-menu
-        :work-item-id="childItem.id"
-        :parent-work-item-id="parentWorkItemId"
         data-testid="links-menu"
         @removeChild="$emit('removeChild', childItem)"
       />
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 9c8fa321dbabfe..9a20e2ec98fe09 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
@@ -161,10 +161,7 @@ describe('WorkItemLinkChildContents', () => {
     });
 
     it('renders work-item-links-menu', () => {
-      expect(findLinksMenuComponent().attributes()).toMatchObject({
-        'work-item-id': workItemTask.id,
-        'parent-work-item-id': WORK_ITEM_ID,
-      });
+      expect(findLinksMenuComponent().exists()).toBe(true);
     });
 
     it('does not render work-item-links-menu when canUpdate is false', () => {
-- 
GitLab