Add latest changes from gitlab-org/gitlab@master

5 files changed, 63 insertions, 5 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 130442476a3..6f60fce37a0 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -15,8 +15,11 @@ import noAccessSvg from '@gitlab/svgs/dist/illustrations/analytics/no-access.svg
 import * as Sentry from '@sentry/browser';
 import { s__ } from '~/locale';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import { getParameterByName } from '~/lib/utils/url_utility';
+import { getParameterByName, updateHistory, setUrlParams } from '~/lib/utils/url_utility';
+import { isPositiveInteger } from '~/lib/utils/number_utils';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { TYPE_WORK_ITEM } from '~/graphql_shared/constants';
 import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue';
 import {
   sprintfWorkItem,
@@ -54,6 +57,7 @@ import WorkItemAssignees from './work_item_assignees.vue';
 import WorkItemLabels from './work_item_labels.vue';
 import WorkItemMilestone from './work_item_milestone.vue';
 import WorkItemNotes from './work_item_notes.vue';
+import WorkItemDetailModal from './work_item_detail_modal.vue';
 
 export default {
   i18n,
@@ -84,6 +88,7 @@ export default {
     WorkItemMilestone,
     WorkItemTree,
     WorkItemNotes,
+    WorkItemDetailModal,
   },
   mixins: [glFeatureFlagMixin()],
   inject: ['fullPath'],
@@ -110,11 +115,16 @@ export default {
     },
   },
   data() {
+    const workItemId = getParameterByName('work_item_id');
+
     return {
       error: undefined,
       updateError: undefined,
       workItem: {},
       updateInProgress: false,
+      modalWorkItemId: isPositiveInteger(workItemId)
+        ? convertToGraphQLId(TYPE_WORK_ITEM, workItemId)
+        : null,
     };
   },
   apollo: {
@@ -299,6 +309,11 @@ export default {
       return widgetHierarchy.children.nodes;
     },
   },
+  mounted() {
+    if (this.modalWorkItemId) {
+      this.openInModal(undefined, { id: this.modalWorkItemId });
+    }
+  },
   methods: {
     isWidgetPresent(type) {
       return this.workItem?.widgets?.find((widget) => widget.type === type);
@@ -424,6 +439,26 @@ export default {
         Sentry.captureException(error);
       }
     },
+    updateUrl(modalWorkItemId) {
+      updateHistory({
+        url: setUrlParams({ work_item_id: getIdFromGraphQLId(modalWorkItemId) }),
+        replace: true,
+      });
+    },
+    openInModal(event, modalWorkItem) {
+      if (event) {
+        event.preventDefault();
+
+        this.updateUrl(modalWorkItem.id);
+      }
+
+      if (this.isModal) {
+        this.$emit('update-modal', event, modalWorkItem.id);
+        return;
+      }
+      this.modalWorkItemId = modalWorkItem.id;
+      this.$refs.modal.show();
+    },
   },
   WORK_ITEM_TYPE_VALUE_OBJECTIVE,
 };
@@ -461,6 +496,7 @@ export default {
               category="tertiary"
               :href="parentUrl"
               :title="parentWorkItem.title"
+              @click="openInModal($event, parentWorkItem)"
               >{{ parentWorkItem.title }}</gl-button
             >
             <gl-icon name="chevron-right" :size="16" class="gl-flex-shrink-0" />
@@ -632,6 +668,7 @@ export default {
         :confidential="workItem.confidential"
         @addWorkItemChild="addChild"
         @removeChild="removeChild"
+        @show-modal="openInModal"
       />
       <template v-if="workItemsMvcEnabled">
         <work-item-notes
@@ -652,5 +689,12 @@ export default {
         :svg-path="noAccessSvgPath"
       />
     </template>
+    <work-item-detail-modal
+      v-if="!isModal"
+      ref="modal"
+      :work-item-id="modalWorkItemId"
+      :show="true"
+      @close="updateUrl"
+    />
   </section>
 </template>
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 e8726814aaf..64c2dcc5304 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
@@ -3,7 +3,6 @@ import { GlAlert, GlModal } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import deleteWorkItemFromTaskMutation from '../graphql/delete_task_from_work_item.mutation.graphql';
 import deleteWorkItemMutation from '../graphql/delete_work_item.mutation.graphql';
-import WorkItemDetail from './work_item_detail.vue';
 
 export default {
   i18n: {
@@ -12,7 +11,7 @@ export default {
   components: {
     GlAlert,
     GlModal,
-    WorkItemDetail,
+    WorkItemDetail: () => import('./work_item_detail.vue'),
   },
   props: {
     workItemId: {
@@ -46,12 +45,18 @@ export default {
       default: null,
     },
   },
-  emits: ['workItemDeleted', 'close'],
+  emits: ['workItemDeleted', 'close', 'update-modal'],
   data() {
     return {
       error: undefined,
+      updatedWorkItemId: null,
     };
   },
+  computed: {
+    displayedWorkItemId() {
+      return this.updatedWorkItemId || this.workItemId;
+    },
+  },
   methods: {
     deleteWorkItem() {
       if (this.lockVersion != null && this.lineNumberStart && this.lineNumberEnd) {
@@ -116,6 +121,7 @@ export default {
         });
     },
     closeModal() {
+      this.updatedWorkItemId = null;
       this.error = '';
       this.$emit('close');
     },
@@ -128,6 +134,10 @@ export default {
     show() {
       this.$refs.modal.show();
     },
+    updateModal($event, workItemId) {
+      this.updatedWorkItemId = workItemId;
+      this.$emit('update-modal', $event, workItemId);
+    },
   },
 };
 </script>
@@ -149,11 +159,12 @@ export default {
     <work-item-detail
       is-modal
       :work-item-parent-id="issueGid"
-      :work-item-id="workItemId"
+      :work-item-id="displayedWorkItemId"
       :work-item-iid="workItemIid"
       class="gl-p-5 gl-mt-n3"
       @close="hide"
       @deleteWorkItem="deleteWorkItem"
+      @update-modal="updateModal"
     />
   </gl-modal>
 </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 3d02d316abc..3a3a846bce5 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
@@ -264,6 +264,7 @@ export default {
       :work-item-type="workItemType"
       :children="children"
       @removeChild="fetchChildren"
+      @click="$emit('click', $event)"
     />
   </div>
 </template>
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 532a3b4aa18..81e2bb76900 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
@@ -251,6 +251,7 @@ export default {
         @mouseover="prefetchWorkItem(child)"
         @mouseout="clearPrefetching"
         @removeChild="$emit('removeChild', $event)"
+        @click="$emit('show-modal', $event, $event.childItem || child)"
       />
     </div>
   </div>
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_tree_children.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_tree_children.vue
index 911cac4de88..71de6867680 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_tree_children.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_tree_children.vue
@@ -63,6 +63,7 @@ export default {
       :child-item="child"
       :work-item-type="workItemType"
       @removeChild="updateWorkItem"
+      @click="$emit('click', Object.assign($event, { childItem: child }))"
     />
   </div>
 </template>