Add latest changes from gitlab-org/gitlab@master

3 files changed, 25 insertions, 11 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 ade954b2a7f..3e2a141960a 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -125,6 +125,7 @@ export default {
       modalWorkItemId: isPositiveInteger(workItemId)
         ? convertToGraphQLId(TYPE_WORK_ITEM, workItemId)
         : null,
+      modalWorkItemIid: getParameterByName('work_item_iid'),
     };
   },
   apollo: {
@@ -136,7 +137,7 @@ export default {
         return this.queryVariables;
       },
       skip() {
-        return !this.workItemId;
+        return !this.workItemId && !this.workItemIid;
       },
       update(data) {
         const workItem = this.fetchByIid ? data.workspace.workItems.nodes[0] : data.workItem;
@@ -310,8 +311,8 @@ export default {
     },
   },
   mounted() {
-    if (this.modalWorkItemId) {
-      this.openInModal(undefined, { id: this.modalWorkItemId });
+    if (this.modalWorkItemId || this.modalWorkItemIid) {
+      this.openInModal(undefined, { id: this.modalWorkItemId, iid: this.modalWorkItemIid });
     }
   },
   methods: {
@@ -439,9 +440,13 @@ export default {
         Sentry.captureException(error);
       }
     },
-    updateUrl(modalWorkItemId) {
+    updateUrl(modalWorkItem) {
+      const params = this.fetchByIid
+        ? { work_item_iid: modalWorkItem?.iid }
+        : { work_item_id: getIdFromGraphQLId(modalWorkItem?.id) };
+
       updateHistory({
-        url: setUrlParams({ work_item_id: getIdFromGraphQLId(modalWorkItemId) }),
+        url: setUrlParams(params),
         replace: true,
       });
     },
@@ -449,14 +454,15 @@ export default {
       if (event) {
         event.preventDefault();
 
-        this.updateUrl(modalWorkItem.id);
+        this.updateUrl(modalWorkItem);
       }
 
       if (this.isModal) {
-        this.$emit('update-modal', event, modalWorkItem.id);
+        this.$emit('update-modal', event, modalWorkItem);
         return;
       }
       this.modalWorkItemId = modalWorkItem.id;
+      this.modalWorkItemIid = modalWorkItem.iid;
       this.$refs.modal.show();
     },
   },
@@ -696,6 +702,7 @@ export default {
       v-if="!isModal"
       ref="modal"
       :work-item-id="modalWorkItemId"
+      :work-item-iid="modalWorkItemIid"
       :show="true"
       @close="updateUrl"
     />
diff --git a/app/assets/javascripts/work_items/components/work_item_detail_modal.vue b/app/assets/javascripts/work_items/components/work_item_detail_modal.vue
index faea80a9de8..171ebd13c29 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail_modal.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail_modal.vue
@@ -50,12 +50,16 @@ export default {
     return {
       error: undefined,
       updatedWorkItemId: null,
+      updatedWorkItemIid: null,
     };
   },
   computed: {
     displayedWorkItemId() {
       return this.updatedWorkItemId || this.workItemId;
     },
+    displayedWorkItemIid() {
+      return this.updatedWorkItemIid || this.workItemIid;
+    },
   },
   methods: {
     deleteWorkItem() {
@@ -122,6 +126,7 @@ export default {
     },
     closeModal() {
       this.updatedWorkItemId = null;
+      this.updatedWorkItemIid = null;
       this.error = '';
       this.$emit('close');
     },
@@ -134,9 +139,10 @@ export default {
     show() {
       this.$refs.modal.show();
     },
-    updateModal($event, workItemId) {
-      this.updatedWorkItemId = workItemId;
-      this.$emit('update-modal', $event, workItemId);
+    updateModal($event, workItem) {
+      this.updatedWorkItemId = workItem.id;
+      this.updatedWorkItemIid = workItem.iid;
+      this.$emit('update-modal', $event, workItem);
     },
   },
 };
@@ -160,7 +166,7 @@ export default {
       is-modal
       :work-item-parent-id="issueGid"
       :work-item-id="displayedWorkItemId"
-      :work-item-iid="workItemIid"
+      :work-item-iid="displayedWorkItemIid"
       class="gl-p-5 gl-mt-n3 gl-reset-bg gl-isolate"
       @close="hide"
       @deleteWorkItem="deleteWorkItem"
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 d2a2d7927d3..bf8eafe3211 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
@@ -55,6 +55,7 @@ fragment WorkItemWidgets on WorkItemWidget {
     children {
       nodes {
         id
+        iid
         confidential
         workItemType {
           id