Add latest changes from gitlab-org/gitlab@master

6 files changed, 101 insertions, 34 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 5316fb9b84f..e4c3bc6924c 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -13,6 +13,7 @@ import {
 import noAccessSvg from '@gitlab/svgs/dist/illustrations/analytics/no-access.svg';
 import { s__ } from '~/locale';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import { getParameterByName } from '~/lib/utils/url_utility';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue';
@@ -90,7 +91,7 @@ export default {
       required: false,
       default: null,
     },
-    iid: {
+    workItemIid: {
       type: String,
       required: false,
       default: null,
@@ -247,13 +248,13 @@ export default {
       return this.isWidgetPresent(WIDGET_TYPE_MILESTONE);
     },
     fetchByIid() {
-      return this.glFeatures.useIidInWorkItemsPath && parseBoolean(this.$route.query.iid_path);
+      return this.glFeatures.useIidInWorkItemsPath && parseBoolean(getParameterByName('iid_path'));
     },
     queryVariables() {
       return this.fetchByIid
         ? {
             fullPath: this.fullPath,
-            iid: this.iid,
+            iid: this.workItemIid,
           }
         : {
             id: this.workItemId,
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 39a662a6c54..a6ef8886d71 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
@@ -20,6 +20,11 @@ export default {
       required: false,
       default: null,
     },
+    workItemIid: {
+      type: String,
+      required: false,
+      default: null,
+    },
     issueGid: {
       type: String,
       required: false,
@@ -144,6 +149,7 @@ export default {
       is-modal
       :work-item-parent-id="issueGid"
       :work-item-id="workItemId"
+      :work-item-iid="workItemIid"
       class="gl-p-5 gl-mt-n3"
       @close="hide"
       @deleteWorkItem="deleteWorkItem"
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 34874908f9b..7141d9c6f89 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
@@ -87,9 +87,9 @@ export default {
         category="tertiary"
         variant="link"
         class="gl-text-truncate gl-max-w-80 gl-text-black-normal!"
-        @click="$emit('click', childItem.id, $event)"
-        @mouseover="$emit('mouseover', childItem.id, $event)"
-        @mouseout="$emit('mouseout', childItem.id, $event)"
+        @click="$emit('click', $event)"
+        @mouseover="$emit('mouseover')"
+        @mouseout="$emit('mouseout')"
       >
         {{ childItem.title }}
       </gl-button>
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 3d469b790a1..e96b56f13a9 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
@@ -9,13 +9,15 @@ import {
   GlTooltipDirective,
 } from '@gitlab/ui';
 import { produce } from 'immer';
+import { isEmpty } from 'lodash';
 import { s__ } from '~/locale';
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { TYPE_WORK_ITEM } from '~/graphql_shared/constants';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import getIssueDetailsQuery from 'ee_else_ce/work_items/graphql/get_issue_details.query.graphql';
-import { isMetaKey } from '~/lib/utils/common_utils';
-import { setUrlParams, updateHistory } from '~/lib/utils/url_utility';
+import { isMetaKey, parseBoolean } from '~/lib/utils/common_utils';
+import { setUrlParams, updateHistory, getParameterByName } from '~/lib/utils/url_utility';
 
 import {
   FORM_TYPES,
@@ -26,6 +28,7 @@ import {
 import getWorkItemLinksQuery from '../../graphql/work_item_links.query.graphql';
 import updateWorkItemMutation from '../../graphql/update_work_item.mutation.graphql';
 import workItemQuery from '../../graphql/work_item.query.graphql';
+import workItemByIidQuery from '../../graphql/work_item_by_iid.query.graphql';
 import WorkItemDetailModal from '../work_item_detail_modal.vue';
 import WorkItemLinkChild from './work_item_link_child.vue';
 import WorkItemLinksForm from './work_item_links_form.vue';
@@ -45,6 +48,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: ['projectPath', 'iid'],
   props: {
     workItemId: {
@@ -72,6 +76,18 @@ export default {
       error(e) {
         this.error = e.message || this.$options.i18n.fetchError;
       },
+      async result() {
+        const { id, iid } = this.childUrlParams;
+        this.activeChild = this.fetchByIid
+          ? this.children.find((child) => child.iid === iid) ?? {}
+          : this.children.find((child) => child.id === id) ?? {};
+        await this.$nextTick();
+        if (!isEmpty(this.activeChild)) {
+          this.$refs.modal.show();
+          return;
+        }
+        this.updateWorkItemIdUrlQuery();
+      },
     },
     parentIssue: {
       query: getIssueDetailsQuery,
@@ -90,7 +106,7 @@ export default {
     return {
       isShownAddForm: false,
       isOpen: true,
-      activeChildId: null,
+      activeChild: {},
       activeToast: null,
       prefetchedWorkItem: null,
       error: undefined,
@@ -139,6 +155,29 @@ export default {
     childrenCountLabel() {
       return this.isLoading && this.children.length === 0 ? '...' : this.children.length;
     },
+    fetchByIid() {
+      return this.glFeatures.useIidInWorkItemsPath && parseBoolean(getParameterByName('iid_path'));
+    },
+    childUrlParams() {
+      const params = {};
+      if (this.fetchByIid) {
+        const iid = getParameterByName('work_item_iid');
+        if (iid) {
+          params.iid = iid;
+        }
+      } else {
+        const workItemId = getParameterByName('work_item_id');
+        if (workItemId) {
+          params.id = convertToGraphQLId(TYPE_WORK_ITEM, workItemId);
+        }
+      }
+      return params;
+    },
+  },
+  mounted() {
+    if (!isEmpty(this.childUrlParams)) {
+      this.addWorkItemQuery(this.childUrlParams);
+    }
   },
   methods: {
     toggle() {
@@ -159,29 +198,29 @@ export default {
       const { defaultClient: client } = this.$apollo.provider.clients;
       this.toggleChildFromCache(child, child.id, client);
     },
-    openChild(childItemId, e) {
+    openChild(child, e) {
       if (isMetaKey(e)) {
         return;
       }
       e.preventDefault();
-      this.activeChildId = childItemId;
+      this.activeChild = child;
       this.$refs.modal.show();
-      this.updateWorkItemIdUrlQuery(childItemId);
+      this.updateWorkItemIdUrlQuery(child);
     },
-    closeModal() {
-      this.activeChildId = null;
-      this.updateWorkItemIdUrlQuery(undefined);
+    async closeModal() {
+      this.activeChild = {};
+      this.updateWorkItemIdUrlQuery();
     },
     handleWorkItemDeleted(childId) {
       const { defaultClient: client } = this.$apollo.provider.clients;
       this.toggleChildFromCache(null, childId, client);
       this.activeToast = this.$toast.show(s__('WorkItem|Task deleted'));
     },
-    updateWorkItemIdUrlQuery(childItemId) {
-      updateHistory({
-        url: setUrlParams({ work_item_id: getIdFromGraphQLId(childItemId) }),
-        replace: true,
-      });
+    updateWorkItemIdUrlQuery({ id, iid } = {}) {
+      const params = this.fetchByIid
+        ? { work_item_iid: iid }
+        : { work_item_id: getIdFromGraphQLId(id) };
+      updateHistory({ url: setUrlParams(params), replace: true });
     },
     toggleChildFromCache(workItem, childId, store) {
       const sourceData = store.readQuery({
@@ -235,16 +274,31 @@ export default {
         });
       }
     },
-    prefetchWorkItem(id) {
+    addWorkItemQuery({ id, iid }) {
+      const variables = this.fetchByIid
+        ? {
+            fullPath: this.projectPath,
+            iid,
+          }
+        : {
+            id,
+          };
+      this.$apollo.addSmartQuery('prefetchedWorkItem', {
+        query() {
+          return this.fetchByIid ? workItemByIidQuery : workItemQuery;
+        },
+        variables,
+        update(data) {
+          return this.fetchByIid ? data.workspace.workItems.nodes[0] : data.workItem;
+        },
+        context: {
+          isSingleRequest: true,
+        },
+      });
+    },
+    prefetchWorkItem({ id, iid }) {
       this.prefetch = setTimeout(
-        () =>
-          this.$apollo.addSmartQuery('prefetchedWorkItem', {
-            query: workItemQuery,
-            variables: {
-              id,
-            },
-            update: (data) => data.workItem,
-          }),
+        () => this.addWorkItemQuery({ id, iid }),
         DEFAULT_DEBOUNCE_AND_THROTTLE_MS,
       );
     },
@@ -355,16 +409,17 @@ export default {
           :can-update="canUpdate"
           :issuable-gid="issuableGid"
           :child-item="child"
-          @click="openChild"
-          @mouseover="prefetchWorkItem"
+          @click="openChild(child, $event)"
+          @mouseover="prefetchWorkItem(child)"
           @mouseout="clearPrefetching"
           @remove="removeChild"
         />
         <work-item-detail-modal
           ref="modal"
-          :work-item-id="activeChildId"
+          :work-item-id="activeChild.id"
+          :work-item-iid="activeChild.iid"
           @close="closeModal"
-          @workItemDeleted="handleWorkItemDeleted(activeChildId)"
+          @workItemDeleted="handleWorkItemDeleted(activeChild.id)"
         />
       </template>
     </div>
diff --git a/app/assets/javascripts/work_items/graphql/work_item_links.query.graphql b/app/assets/javascripts/work_items/graphql/work_item_links.query.graphql
index 7b63d9c7ca3..a37e5b869f6 100644
--- a/app/assets/javascripts/work_items/graphql/work_item_links.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item_links.query.graphql
@@ -20,6 +20,7 @@ query workItemLinksQuery($id: WorkItemID!) {
         children {
           nodes {
             id
+            iid
             confidential
             workItemType {
               id
diff --git a/app/assets/javascripts/work_items/pages/work_item_root.vue b/app/assets/javascripts/work_items/pages/work_item_root.vue
index 1c00bd16263..d04d4942253 100644
--- a/app/assets/javascripts/work_items/pages/work_item_root.vue
+++ b/app/assets/javascripts/work_items/pages/work_item_root.vue
@@ -70,6 +70,10 @@ export default {
 <template>
   <div>
     <gl-alert v-if="error" variant="danger" @dismiss="error = ''">{{ error }}</gl-alert>
-    <work-item-detail :work-item-id="gid" :iid="id" @deleteWorkItem="deleteWorkItem($event)" />
+    <work-item-detail
+      :work-item-id="gid"
+      :work-item-iid="id"
+      @deleteWorkItem="deleteWorkItem($event)"
+    />
   </div>
 </template>