From a23081026d3713da1ea14022f5cc3ab84b961511 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Fri, 16 Dec 2022 17:39:45 +0400
Subject: [PATCH 1/2] Remove excessive jQuery usage from Vue components

---
 .../issues/show/components/description.vue    | 22 +++++++++----------
 .../notes/components/noteable_note.vue        |  5 ++---
 .../javascripts/notes/stores/actions.js       |  2 +-
 .../components/notes/system_note.vue          | 14 +++++++-----
 .../components/notes/system_note.vue          | 14 +++++++-----
 .../components/notes/system_note_spec.js      |  1 +
 6 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/app/assets/javascripts/issues/show/components/description.vue b/app/assets/javascripts/issues/show/components/description.vue
index 78e729b97da0ef..38534e9f0c52c9 100644
--- a/app/assets/javascripts/issues/show/components/description.vue
+++ b/app/assets/javascripts/issues/show/components/description.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlToast, GlTooltip, GlModalDirective } from '@gitlab/ui';
-import $ from 'jquery';
 import Sortable from 'sortablejs';
 import Vue from 'vue';
 import SafeHtml from '~/vue_shared/directives/safe_html';
@@ -301,20 +300,19 @@ export default {
 
     updateTaskStatusText() {
       const taskRegexMatches = this.taskStatus.match(/(\d+) of ((?!0)\d+)/);
-      const $issuableHeader = $('.issuable-meta');
-      const $tasks = $('#task_status', $issuableHeader);
-      const $tasksShort = $('#task_status_short', $issuableHeader);
+      const $tasks = document.querySelector('.issuable-meta #task_status');
+      const $tasksShort = document.querySelector('.issuable-meta #task_status_short');
+
+      if (!$tasks || !$tasksShort) return;
 
       if (taskRegexMatches) {
-        $tasks.text(this.taskStatus);
-        $tasksShort.text(
-          `${taskRegexMatches[1]}/${taskRegexMatches[2]} checklist item${
-            taskRegexMatches[2] > 1 ? 's' : ''
-          }`,
-        );
+        $tasks.textContent = this.taskStatus;
+        $tasksShort.textContent = `${taskRegexMatches[1]}/${taskRegexMatches[2]} checklist item${
+          taskRegexMatches[2] > 1 ? 's' : ''
+        }`;
       } else {
-        $tasks.text('');
-        $tasksShort.text('');
+        $tasks.textContent = '';
+        $tasksShort.textContent = '';
       }
     },
     renderTaskActions() {
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 826e7e5a3d064d..07d5d89bc1123a 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlSprintf, GlAvatarLink, GlAvatar } from '@gitlab/ui';
-import $ from 'jquery';
 import { escape, isEmpty } from 'lodash';
 import { mapGetters, mapActions } from 'vuex';
 import SafeHtml from '~/vue_shared/directives/safe_html';
@@ -223,14 +222,14 @@ export default {
       if (noteId === this.note.id) {
         this.isEditing = true;
         this.setSelectedCommentPositionHover();
-        this.scrollToNoteIfNeeded($(this.$el));
+        this.scrollToNoteIfNeeded(this.$el);
       }
     });
   },
 
   mounted() {
     if (this.isTarget && this.shouldScrollToNote) {
-      this.scrollToNoteIfNeeded($(this.$el));
+      this.scrollToNoteIfNeeded(this.$el);
     }
   },
 
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index d290a8ccb84607..7bd772f8fb8f79 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -682,7 +682,7 @@ export const toggleAwardRequest = ({ dispatch }, data) => {
 };
 
 export const scrollToNoteIfNeeded = (context, el) => {
-  if (!isInViewport(el[0])) {
+  if (!isInViewport(el)) {
     scrollToElement(el);
   }
 };
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 1cbbdf0deb0ded..58e44eb825feeb 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -17,7 +17,6 @@
  *   />
  */
 import { GlButton, GlSkeletonLoader, GlTooltipDirective, GlIcon } from '@gitlab/ui';
-import $ from 'jquery';
 import { mapGetters, mapActions, mapState } from 'vuex';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history';
@@ -77,12 +76,15 @@ export default {
     toggleIcon() {
       return this.expanded ? 'chevron-up' : 'chevron-down';
     },
-    // following 2 methods taken from code in `collapseLongCommitList` of notes.js:
-    actionTextHtml() {
-      return $(this.note.note_html).unwrap().html();
+    noteElement() {
+      const node = document.createElement('div');
+      // eslint-disable-next-line no-unsanitized/method
+      node.insertAdjacentHTML('afterbegin', this.note.note_html);
+      return node;
     },
     hasMoreCommits() {
-      return $(this.note.note_html).filter('ul').children().length > MAX_VISIBLE_COMMIT_LIST_COUNT;
+      const elements = this.noteElement.querySelectorAll('ul > *') || [];
+      return elements.length > MAX_VISIBLE_COMMIT_LIST_COUNT;
     },
     descriptionVersion() {
       return this.descriptionVersions[this.note.description_version_id];
@@ -130,7 +132,7 @@ export default {
           :note-id="note.id"
           :is-system-note="true"
         >
-          <span ref="gfm-content" v-safe-html="actionTextHtml"></span>
+          <span ref="gfm-content" v-safe-html="note.note_html"></span>
           <template
             v-if="canSeeDescriptionVersion || note.outdated_line_change_path"
             #extra-controls
diff --git a/app/assets/javascripts/work_items/components/notes/system_note.vue b/app/assets/javascripts/work_items/components/notes/system_note.vue
index 92a2fcaf1dfc6e..0148ecd723f6aa 100644
--- a/app/assets/javascripts/work_items/components/notes/system_note.vue
+++ b/app/assets/javascripts/work_items/components/notes/system_note.vue
@@ -16,7 +16,6 @@
  *   />
  */
 import { GlButton, GlSkeletonLoader, GlTooltipDirective, GlIcon } from '@gitlab/ui';
-import $ from 'jquery';
 import { renderGFM } from '~/behaviors/markdown/render_gfm';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history';
@@ -77,12 +76,15 @@ export default {
     toggleIcon() {
       return this.expanded ? 'chevron-up' : 'chevron-down';
     },
-    // following 2 methods taken from code in `collapseLongCommitList` of notes.js:
-    actionTextHtml() {
-      return $(this.note.bodyHtml).unwrap().html();
+    noteElement() {
+      const node = document.createElement('div');
+      // eslint-disable-next-line no-unsanitized/method
+      node.insertAdjacentHTML('afterbegin', this.note.note_html);
+      return node;
     },
     hasMoreCommits() {
-      return $(this.note.bodyHtml).filter('ul').children().length > MAX_VISIBLE_COMMIT_LIST_COUNT;
+      const elements = this.noteElement.querySelectorAll('ul > *') || [];
+      return elements.length > MAX_VISIBLE_COMMIT_LIST_COUNT;
     },
     descriptionVersion() {
       return this.descriptionVersions[this.note.description_version_id];
@@ -132,7 +134,7 @@ export default {
           :note-id="note.id"
           :is-system-note="true"
         >
-          <span ref="gfm-content" v-safe-html="actionTextHtml"></span>
+          <span ref="gfm-content" v-safe-html="note.note_html"></span>
           <template
             v-if="canSeeDescriptionVersion || note.outdated_line_change_path"
             #extra-controls
diff --git a/spec/frontend/work_items/components/notes/system_note_spec.js b/spec/frontend/work_items/components/notes/system_note_spec.js
index 3e3b8bf65b2c91..457d432565f605 100644
--- a/spec/frontend/work_items/components/notes/system_note_spec.js
+++ b/spec/frontend/work_items/components/notes/system_note_spec.js
@@ -43,6 +43,7 @@ describe('system note component', () => {
           path: '/root',
         },
         bodyHtml: '<p dir="auto">closed</p>',
+        note_html: '<p dir="auto">closed</p>',
         systemNoteIconName: 'status_closed',
         createdAt: '2017-08-02T10:51:58.559Z',
       },
-- 
GitLab


From 62d1dfed457ee38f63f156529c0a87ff164a23d4 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Wed, 21 Dec 2022 21:03:36 +0400
Subject: [PATCH 2/2] Simplify elements identifiers

Remove unnecessary scrollToNoteIfNeeded vuex action

Fix system_note tests
---
 .../issues/show/components/description.vue         | 14 +++++++-------
 .../javascripts/notes/components/noteable_note.vue |  7 ++++++-
 app/assets/javascripts/notes/stores/actions.js     |  8 +-------
 .../vue_shared/components/notes/system_note.vue    |  7 +++++--
 .../work_items/components/notes/system_note.vue    |  7 +++++--
 5 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/issues/show/components/description.vue b/app/assets/javascripts/issues/show/components/description.vue
index 38534e9f0c52c9..8202dec5f02ecb 100644
--- a/app/assets/javascripts/issues/show/components/description.vue
+++ b/app/assets/javascripts/issues/show/components/description.vue
@@ -300,19 +300,19 @@ export default {
 
     updateTaskStatusText() {
       const taskRegexMatches = this.taskStatus.match(/(\d+) of ((?!0)\d+)/);
-      const $tasks = document.querySelector('.issuable-meta #task_status');
-      const $tasksShort = document.querySelector('.issuable-meta #task_status_short');
+      const tasks = document.querySelector('.issuable-meta #task_status');
+      const tasksShort = document.querySelector('.issuable-meta #task_status_short');
 
-      if (!$tasks || !$tasksShort) return;
+      if (!tasks || !tasksShort) return;
 
       if (taskRegexMatches) {
-        $tasks.textContent = this.taskStatus;
-        $tasksShort.textContent = `${taskRegexMatches[1]}/${taskRegexMatches[2]} checklist item${
+        tasks.textContent = this.taskStatus;
+        tasksShort.textContent = `${taskRegexMatches[1]}/${taskRegexMatches[2]} checklist item${
           taskRegexMatches[2] > 1 ? 's' : ''
         }`;
       } else {
-        $tasks.textContent = '';
-        $tasksShort.textContent = '';
+        tasks.textContent = '';
+        tasksShort.textContent = '';
       }
     },
     renderTaskActions() {
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 07d5d89bc1123a..c3e87c3678f45b 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -6,6 +6,7 @@ import SafeHtml from '~/vue_shared/directives/safe_html';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { INLINE_DIFF_LINES_KEY } from '~/diffs/constants';
 import { createAlert } from '~/flash';
+import { isInViewport, scrollToElement } from '~/lib/utils/common_utils';
 import { HTTP_STATUS_GONE } from '~/lib/utils/http_status';
 import { ignoreWhilePending } from '~/lib/utils/ignore_while_pending';
 import { truncateSha } from '~/lib/utils/text_utility';
@@ -239,11 +240,15 @@ export default {
       'removeNote',
       'updateNote',
       'toggleResolveNote',
-      'scrollToNoteIfNeeded',
       'updateAssignees',
       'setSelectedCommentPositionHover',
       'updateDiscussionPosition',
     ]),
+    scrollToNoteIfNeeded(el) {
+      if (!isInViewport(el)) {
+        scrollToElement(el);
+      }
+    },
     editHandler() {
       this.isEditing = true;
       this.setSelectedCommentPositionHover();
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 7bd772f8fb8f79..a527936063ad29 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -11,7 +11,7 @@ import { confidentialWidget } from '~/sidebar/components/confidential/sidebar_co
 import updateIssueLockMutation from '~/sidebar/queries/update_issue_lock.mutation.graphql';
 import updateMergeRequestLockMutation from '~/sidebar/queries/update_merge_request_lock.mutation.graphql';
 import loadAwardsHandler from '~/awards_handler';
-import { isInViewport, scrollToElement, isInMRPage } from '~/lib/utils/common_utils';
+import { isInMRPage } from '~/lib/utils/common_utils';
 import Poll from '~/lib/utils/poll';
 import { create } from '~/lib/utils/recurrence';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
@@ -681,12 +681,6 @@ export const toggleAwardRequest = ({ dispatch }, data) => {
   });
 };
 
-export const scrollToNoteIfNeeded = (context, el) => {
-  if (!isInViewport(el)) {
-    scrollToElement(el);
-  }
-};
-
 export const fetchDiscussionDiffLines = ({ commit }, discussion) =>
   axios.get(discussion.truncated_diff_lines_path).then(({ data }) => {
     commit(types.SET_DISCUSSION_DIFF_LINES, {
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 58e44eb825feeb..1254bb297c2fa4 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -77,11 +77,14 @@ export default {
       return this.expanded ? 'chevron-up' : 'chevron-down';
     },
     noteElement() {
-      const node = document.createElement('div');
+      const node = document.createElement('template');
       // eslint-disable-next-line no-unsanitized/method
       node.insertAdjacentHTML('afterbegin', this.note.note_html);
       return node;
     },
+    unwrappedNoteHtml() {
+      return this.noteElement.children[0].innerHTML;
+    },
     hasMoreCommits() {
       const elements = this.noteElement.querySelectorAll('ul > *') || [];
       return elements.length > MAX_VISIBLE_COMMIT_LIST_COUNT;
@@ -132,7 +135,7 @@ export default {
           :note-id="note.id"
           :is-system-note="true"
         >
-          <span ref="gfm-content" v-safe-html="note.note_html"></span>
+          <span ref="gfm-content" v-safe-html="unwrappedNoteHtml"></span>
           <template
             v-if="canSeeDescriptionVersion || note.outdated_line_change_path"
             #extra-controls
diff --git a/app/assets/javascripts/work_items/components/notes/system_note.vue b/app/assets/javascripts/work_items/components/notes/system_note.vue
index 0148ecd723f6aa..1eece0af31e663 100644
--- a/app/assets/javascripts/work_items/components/notes/system_note.vue
+++ b/app/assets/javascripts/work_items/components/notes/system_note.vue
@@ -77,11 +77,14 @@ export default {
       return this.expanded ? 'chevron-up' : 'chevron-down';
     },
     noteElement() {
-      const node = document.createElement('div');
+      const node = document.createElement('template');
       // eslint-disable-next-line no-unsanitized/method
       node.insertAdjacentHTML('afterbegin', this.note.note_html);
       return node;
     },
+    unwrappedNoteHtml() {
+      return this.noteElement.children[0].innerHTML;
+    },
     hasMoreCommits() {
       const elements = this.noteElement.querySelectorAll('ul > *') || [];
       return elements.length > MAX_VISIBLE_COMMIT_LIST_COUNT;
@@ -134,7 +137,7 @@ export default {
           :note-id="note.id"
           :is-system-note="true"
         >
-          <span ref="gfm-content" v-safe-html="note.note_html"></span>
+          <span ref="gfm-content" v-safe-html="unwrappedNoteHtml"></span>
           <template
             v-if="canSeeDescriptionVersion || note.outdated_line_change_path"
             #extra-controls
-- 
GitLab