Add latest changes from gitlab-org/gitlab@15-3-stable-eev15.3.0-rc42

2 files changed, 50 insertions, 5 deletions

diff --git a/app/assets/javascripts/issuable/components/issue_milestone.vue b/app/assets/javascripts/issuable/components/issue_milestone.vue
index 11fc032f34f..4f1001e8c3b 100644
--- a/app/assets/javascripts/issuable/components/issue_milestone.vue
+++ b/app/assets/javascripts/issuable/components/issue_milestone.vue
@@ -73,7 +73,9 @@ export default {
 <template>
   <div ref="milestoneDetails" class="issue-milestone-details">
     <gl-icon :size="16" class="gl-mr-2 flex-shrink-0" name="clock" />
-    <span class="milestone-title d-inline-block">{{ milestone.title }}</span>
+    <span class="milestone-title gl-display-inline-block gl-text-truncate">{{
+      milestone.title
+    }}</span>
     <gl-tooltip :target="() => $refs.milestoneDetails" placement="bottom" class="js-item-milestone">
       <span class="bold">{{ __('Milestone') }}</span> <br />
       <span>{{ milestone.title }}</span> <br />
diff --git a/app/assets/javascripts/issuable/components/related_issuable_item.vue b/app/assets/javascripts/issuable/components/related_issuable_item.vue
index a505a988360..667c712d3be 100644
--- a/app/assets/javascripts/issuable/components/related_issuable_item.vue
+++ b/app/assets/javascripts/issuable/components/related_issuable_item.vue
@@ -2,29 +2,35 @@
 import '~/commons/bootstrap';
 import {
   GlIcon,
+  GlLink,
   GlTooltip,
   GlTooltipDirective,
   GlButton,
   GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
 import IssueDueDate from '~/boards/components/issue_due_date.vue';
+import { TYPE_WORK_ITEM } from '~/graphql_shared/constants';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { setUrlParams, updateHistory } from '~/lib/utils/url_utility';
 import { sprintf } from '~/locale';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue';
 import relatedIssuableMixin from '../mixins/related_issuable_mixin';
 import IssueAssignees from './issue_assignees.vue';
 import IssueMilestone from './issue_milestone.vue';
 
 export default {
-  name: 'IssueItem',
   components: {
     IssueMilestone,
     IssueAssignees,
     CiIcon,
     GlIcon,
+    GlLink,
     GlTooltip,
     IssueWeight: () => import('ee_component/boards/components/issue_card_weight.vue'),
     IssueDueDate,
     GlButton,
+    WorkItemDetailModal,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -47,6 +53,11 @@ export default {
       required: false,
       default: '',
     },
+    workItemType: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     stateTitle() {
@@ -62,6 +73,27 @@ export default {
     iconClasses() {
       return `${this.iconClass} ic-${this.iconName}`;
     },
+    workItemId() {
+      return convertToGraphQLId(TYPE_WORK_ITEM, this.idKey);
+    },
+  },
+  methods: {
+    handleTitleClick(event) {
+      if (this.workItemType === 'TASK') {
+        event.preventDefault();
+        this.$refs.modal.show();
+        this.updateWorkItemIdUrlQuery(this.idKey);
+      }
+    },
+    handleWorkItemDeleted(workItemId) {
+      this.$emit('relatedIssueRemoveRequest', workItemId);
+    },
+    updateWorkItemIdUrlQuery(workItemId) {
+      updateHistory({
+        url: setUrlParams({ work_item_id: workItemId }),
+        replace: true,
+      });
+    },
   },
 };
 </script>
@@ -102,7 +134,13 @@ export default {
           class="confidential-icon gl-mr-2 align-self-baseline align-self-md-auto mt-xl-0"
           :aria-label="__('Confidential')"
         />
-        <a :href="computedPath" class="sortable-link gl-font-weight-normal">{{ title }}</a>
+        <gl-link
+          :href="computedPath"
+          class="sortable-link gl-font-weight-normal"
+          @click="handleTitleClick"
+        >
+          {{ title }}
+        </gl-link>
       </div>
 
       <!-- Info area: meta, path, and assignees -->
@@ -178,16 +216,15 @@ export default {
 
     <span
       v-if="isLocked"
-      ref="lockIcon"
       v-gl-tooltip
       class="gl-px-3 gl-display-inline-block gl-cursor-not-allowed"
       :title="lockedMessage"
+      data-testid="lockIcon"
     >
       <gl-icon name="lock" />
     </span>
     <gl-button
       v-else-if="canRemove"
-      ref="removeButton"
       v-gl-tooltip
       icon="close"
       category="tertiary"
@@ -198,5 +235,11 @@ export default {
       :aria-label="__('Remove')"
       @click="onRemoveRequest"
     />
+    <work-item-detail-modal
+      ref="modal"
+      :work-item-id="workItemId"
+      @close="updateWorkItemIdUrlQuery"
+      @workItemDeleted="handleWorkItemDeleted"
+    />
   </div>
 </template>