1 files changed, 15 insertions, 134 deletions

diff --git a/app/assets/javascripts/issues/show/components/description.vue b/app/assets/javascripts/issues/show/components/description.vue
index 5682f85bc97..b36a456f41b 100644
--- a/app/assets/javascripts/issues/show/components/description.vue
+++ b/app/assets/javascripts/issues/show/components/description.vue
@@ -1,35 +1,26 @@
 <script>
-import { GlModalDirective, GlToast } from '@gitlab/ui';
+import { GlToast } from '@gitlab/ui';
 import $ from 'jquery';
-import { uniqueId } from 'lodash';
 import Sortable from 'sortablejs';
 import Vue from 'vue';
 import getIssueDetailsQuery from 'ee_else_ce/work_items/graphql/get_issue_details.query.graphql';
 import SafeHtml from '~/vue_shared/directives/safe_html';
-import { getIdFromGraphQLId, convertToGraphQLId } from '~/graphql_shared/utils';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { TYPENAME_ISSUE, TYPENAME_WORK_ITEM } from '~/graphql_shared/constants';
 import { createAlert } from '~/flash';
 import { TYPE_ISSUE } from '~/issues/constants';
-import { isMetaKey } from '~/lib/utils/common_utils';
-import { isPositiveInteger } from '~/lib/utils/number_utils';
-import { getParameterByName, setUrlParams, updateHistory } from '~/lib/utils/url_utility';
 import { __, s__, sprintf } from '~/locale';
 import { getSortableDefaultOptions, isDragging } from '~/sortable/utils';
 import TaskList from '~/task_list';
-import Tracking from '~/tracking';
 import addHierarchyChildMutation from '~/work_items/graphql/add_hierarchy_child.mutation.graphql';
 import removeHierarchyChildMutation from '~/work_items/graphql/remove_hierarchy_child.mutation.graphql';
 import createWorkItemMutation from '~/work_items/graphql/create_work_item.mutation.graphql';
 import deleteWorkItemMutation from '~/work_items/graphql/delete_work_item.mutation.graphql';
-import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
 import projectWorkItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue';
 import {
   sprintfWorkItem,
   I18N_WORK_ITEM_ERROR_CREATING,
   I18N_WORK_ITEM_ERROR_DELETING,
-  TRACKING_CATEGORY_SHOW,
   TASK_TYPE_NAME,
 } from '~/work_items/constants';
 import { renderGFM } from '~/behaviors/markdown/render_gfm';
@@ -51,12 +42,8 @@ const workItemTypes = {
 export default {
   directives: {
     SafeHtml,
-    GlModal: GlModalDirective,
   },
-  components: {
-    WorkItemDetailModal,
-  },
-  mixins: [animateMixin, glFeatureFlagMixin(), Tracking.mixin()],
+  mixins: [animateMixin],
   inject: ['fullPath', 'hasIterationsFeature'],
   props: {
     canUpdate: {
@@ -104,18 +91,12 @@ export default {
     },
   },
   data() {
-    const workItemId = getParameterByName('work_item_id');
-
     return {
       hasTaskListItemActions: false,
       preAnimation: false,
       pulseAnimation: false,
       initialUpdate: true,
       issueDetails: {},
-      activeTask: {},
-      workItemId: isPositiveInteger(workItemId)
-        ? convertToGraphQLId(TYPENAME_WORK_ITEM, workItemId)
-        : undefined,
       workItemTypes: [],
     };
   },
@@ -129,18 +110,7 @@ export default {
       },
       update: (data) => data.issue,
       skip() {
-        return !this.issueId;
-      },
-    },
-    workItem: {
-      query: workItemQuery,
-      variables() {
-        return {
-          id: this.workItemId,
-        };
-      },
-      skip() {
-        return !this.workItemId;
+        return !this.canUpdate || !this.issueId;
       },
     },
     workItemTypes: {
@@ -153,10 +123,13 @@ export default {
       update(data) {
         return data.workspace?.workItemTypes?.nodes;
       },
+      skip() {
+        return !this.canUpdate;
+      },
     },
   },
   computed: {
-    taskWorkItemType() {
+    taskWorkItemTypeId() {
       return this.workItemTypes.find((type) => type.name === TASK_TYPE_NAME)?.id;
     },
     issueGid() {
@@ -185,12 +158,6 @@ export default {
 
     this.renderGFM();
     this.updateTaskStatusText();
-    if (this.workItemId) {
-      const taskLink = this.$el.querySelector(
-        `.gfm-issue[data-issue="${getIdFromGraphQLId(this.workItemId)}"]`,
-      );
-      this.openWorkItemDetailModal(taskLink);
-    }
   },
   beforeDestroy() {
     eventHub.$off('convert-task-list-item', this.convertTaskListItem);
@@ -223,10 +190,10 @@ export default {
     },
     renderSortableLists() {
       // We exclude GLFM table of contents which have a `section-nav` class on the root `ul`.
-      const lists = document.querySelectorAll(
+      const lists = this.$el.querySelectorAll?.(
         '.description .md > ul:not(.section-nav), .description .md > ul:not(.section-nav) ul, .description ol',
       );
-      lists.forEach((list) => {
+      lists?.forEach((list) => {
         if (list.children.length <= 1) {
           return;
         }
@@ -355,59 +322,15 @@ export default {
       this.$emit('saveDescription', newDescription);
     },
     renderTaskListItemActions() {
-      if (!this.$el?.querySelectorAll) {
-        return;
-      }
-
-      const taskListFields = this.$el.querySelectorAll('.task-list-item:not(.inapplicable)');
-
-      taskListFields.forEach((item) => {
-        const taskLink = item.querySelector('.gfm-issue');
-        if (taskLink) {
-          const { issue, referenceType, issueType } = taskLink.dataset;
-          if (issueType !== workItemTypes.TASK) {
-            return;
-          }
-          const workItemId = convertToGraphQLId(TYPENAME_WORK_ITEM, issue);
-          this.addHoverListeners(taskLink, workItemId);
-          taskLink.classList.add('gl-link');
-          taskLink.addEventListener('click', (e) => {
-            if (isMetaKey(e)) {
-              return;
-            }
-            e.preventDefault();
-            this.openWorkItemDetailModal(taskLink);
-            this.workItemId = workItemId;
-            this.updateWorkItemIdUrlQuery(issue);
-            this.track('viewed_work_item_from_modal', {
-              category: TRACKING_CATEGORY_SHOW,
-              label: 'work_item_view',
-              property: `type_${referenceType}`,
-            });
-          });
-          return;
-        }
+      const taskListItems = this.$el.querySelectorAll?.('.task-list-item:not(.inapplicable)');
 
-        const toggleClass = uniqueId('task-list-item-actions-');
-        const dropdown = this.createTaskListItemActions({ canUpdate: this.canUpdate, toggleClass });
-        this.addPointerEventListeners(item, `.${toggleClass}`);
+      taskListItems?.forEach((item) => {
+        const dropdown = this.createTaskListItemActions({ canUpdate: this.canUpdate });
         this.insertNextToTaskListItemText(dropdown, item);
+        this.addPointerEventListeners(item, '.task-list-item-actions');
         this.hasTaskListItemActions = true;
       });
     },
-    addHoverListeners(taskLink, id) {
-      let workItemPrefetch;
-      taskLink.addEventListener('mouseover', () => {
-        workItemPrefetch = setTimeout(() => {
-          this.workItemId = id;
-        }, 150);
-      });
-      taskLink.addEventListener('mouseout', () => {
-        if (workItemPrefetch) {
-          clearTimeout(workItemPrefetch);
-        }
-      });
-    },
     insertNextToTaskListItemText(element, listItem) {
       const children = Array.from(listItem.children);
       const paragraph = children.find((el) => el.tagName === 'P');
@@ -424,27 +347,6 @@ export default {
         listItem.append(element);
       }
     },
-    setActiveTask(el) {
-      const { parentElement } = el;
-      const lineNumbers = parentElement.dataset.sourcepos.match(/\b\d+(?=:)/g);
-      this.activeTask = {
-        title: parentElement.innerText,
-        lineNumberStart: lineNumbers[0],
-        lineNumberEnd: lineNumbers[1],
-      };
-    },
-    openWorkItemDetailModal(el) {
-      if (!el) {
-        return;
-      }
-
-      this.setActiveTask(el);
-      this.$refs.detailsModal.show();
-    },
-    closeWorkItemDetailModal() {
-      this.workItemId = undefined;
-      this.updateWorkItemIdUrlQuery(undefined);
-    },
     async createTask({ taskTitle, taskDescription, oldDescription }) {
       try {
         const { title, description } = extractTaskTitleAndDescription(taskTitle, taskDescription);
@@ -465,7 +367,7 @@ export default {
           },
           projectPath: this.fullPath,
           title,
-          workItemTypeId: this.taskWorkItemType,
+          workItemTypeId: this.taskWorkItemTypeId,
         };
 
         const { data } = await this.$apollo.mutate({
@@ -529,16 +431,6 @@ export default {
         captureError: true,
       });
     },
-    handleDeleteTask(description) {
-      this.$emit('updateDescription', description);
-      this.$toast.show(s__('WorkItem|Task deleted'));
-    },
-    updateWorkItemIdUrlQuery(workItemId) {
-      updateHistory({
-        url: setUrlParams({ work_item_id: workItemId }),
-        replace: true,
-      });
-    },
   },
   safeHtmlConfig: { ADD_TAGS: ['gl-emoji', 'copy-code'] },
 };
@@ -566,16 +458,5 @@ export default {
       data-testid="textarea"
     >
     </textarea>
-    <work-item-detail-modal
-      ref="detailsModal"
-      :can-update="canUpdate"
-      :work-item-id="workItemId"
-      :issue-gid="issueGid"
-      :lock-version="lockVersion"
-      :line-number-start="activeTask.lineNumberStart"
-      :line-number-end="activeTask.lineNumberEnd"
-      @workItemDeleted="handleDeleteTask"
-      @close="closeWorkItemDetailModal"
-    />
   </div>
 </template>