From 0f8ceee0f3d8767e62e6e800d801331386eaa03e Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Thu, 15 Dec 2022 18:28:02 +0400
Subject: [PATCH] Remove excessive jQuery usage from Vue components

---
 app/assets/javascripts/layout_nav.js          | 77 +++++++++----------
 .../labels_select_vue/labels_select_root.vue  |  5 +-
 .../components/states/work_in_progress.vue    |  5 +-
 .../vue_shared/components/navigation_tabs.vue |  4 +-
 4 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js
index ab83f1ecc147bc..90c1b31286ab62 100644
--- a/app/assets/javascripts/layout_nav.js
+++ b/app/assets/javascripts/layout_nav.js
@@ -12,8 +12,45 @@ function hideEndFade($scrollingTabs) {
   });
 }
 
+export function initScrollingTabs() {
+  const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized');
+  $scrollingTabs.addClass('is-initialized');
+
+  $(window)
+    .on('resize.nav', () => {
+      hideEndFade($scrollingTabs);
+    })
+    .trigger('resize.nav');
+
+  $scrollingTabs.on('scroll', function tabsScrollEvent() {
+    const $this = $(this);
+    const currentPosition = $this.scrollLeft();
+    const maxPosition = $this.prop('scrollWidth') - $this.outerWidth();
+
+    $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0);
+    $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1);
+  });
+
+  $scrollingTabs.each(function scrollTabsEachLoop() {
+    const $this = $(this);
+    const scrollingTabWidth = $this.width();
+    const $active = $this.find('.active');
+    const activeWidth = $active.width();
+
+    if ($active.length) {
+      const offset = $active.offset().left + activeWidth;
+
+      if (offset > scrollingTabWidth - 30) {
+        const scrollLeft = offset - scrollingTabWidth / 2 - activeWidth / 2;
+
+        $this.scrollLeft(scrollLeft);
+      }
+    }
+  });
+}
+
 function initDeferred() {
-  $(document).trigger('init.scrolling-tabs');
+  initScrollingTabs();
 
   const appEl = document.getElementById('whats-new-app');
   if (!appEl) return;
@@ -34,43 +71,5 @@ export default function initLayoutNav() {
 
   initFlyOutNav();
 
-  // We need to init it on DomContentLoaded as others could also call it
-  $(document).on('init.scrolling-tabs', () => {
-    const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized');
-    $scrollingTabs.addClass('is-initialized');
-
-    $(window)
-      .on('resize.nav', () => {
-        hideEndFade($scrollingTabs);
-      })
-      .trigger('resize.nav');
-
-    $scrollingTabs.on('scroll', function tabsScrollEvent() {
-      const $this = $(this);
-      const currentPosition = $this.scrollLeft();
-      const maxPosition = $this.prop('scrollWidth') - $this.outerWidth();
-
-      $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0);
-      $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1);
-    });
-
-    $scrollingTabs.each(function scrollTabsEachLoop() {
-      const $this = $(this);
-      const scrollingTabWidth = $this.width();
-      const $active = $this.find('.active');
-      const activeWidth = $active.width();
-
-      if ($active.length) {
-        const offset = $active.offset().left + activeWidth;
-
-        if (offset > scrollingTabWidth - 30) {
-          const scrollLeft = offset - scrollingTabWidth / 2 - activeWidth / 2;
-
-          $this.scrollLeft(scrollLeft);
-        }
-      }
-    });
-  });
-
   requestIdleCallback(initDeferred);
 }
diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_vue/labels_select_root.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_vue/labels_select_root.vue
index 2a78db352d76eb..04c62c99a1148a 100644
--- a/app/assets/javascripts/sidebar/components/labels/labels_select_vue/labels_select_root.vue
+++ b/app/assets/javascripts/sidebar/components/labels/labels_select_vue/labels_select_root.vue
@@ -1,5 +1,4 @@
 <script>
-import $ from 'jquery';
 import Vue from 'vue';
 import Vuex, { mapState, mapActions, mapGetters } from 'vuex';
 import { isInViewport } from '~/lib/utils/common_utils';
@@ -260,8 +259,8 @@ export default {
           target?.parentElement?.classList.contains(className),
       );
 
-      const hasExceptionParent = ['.js-btn-back', '.js-labels-list'].some(
-        (className) => $(target).parents(className).length,
+      const hasExceptionParent = ['.js-btn-back', '.js-labels-list'].some((className) =>
+        target?.closest(className),
       );
 
       const isInDropdownButtonCollapsed = this.$refs.dropdownButtonCollapsed?.$el.contains(target);
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
index 01f9b4757a0e00..211fbba305fd28 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
@@ -1,7 +1,6 @@
 <script>
 import { GlButton } from '@gitlab/ui';
 import { produce } from 'immer';
-import $ from 'jquery';
 import { createAlert } from '~/flash';
 import toast from '~/vue_shared/plugins/global_toast';
 import { __ } from '~/locale';
@@ -111,7 +110,9 @@ export default {
             },
           }) => {
             toast(__('Marked as ready. Merging is now allowed.'));
-            $('.merge-request .detail-page-description .title').text(title);
+            document.querySelector(
+              '.merge-request .detail-page-description .title',
+            ).textContent = title;
 
             if (!window.gon?.features?.realtimeMrStatusChange) {
               eventHub.$emit('MRWidgetUpdateRequested');
diff --git a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
index 21212e82de4130..c83643ca4de95d 100644
--- a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
+++ b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlBadge, GlTabs, GlTab } from '@gitlab/ui';
-import $ from 'jquery';
+import { initScrollingTabs } from '~/layout_nav';
 
 /**
  * Given an array of tabs, renders non linked bootstrap tabs.
@@ -41,7 +41,7 @@ export default {
     },
   },
   mounted() {
-    $(document).trigger('init.scrolling-tabs');
+    initScrollingTabs();
   },
   methods: {
     shouldRenderBadge(count) {
-- 
GitLab