Merge branch 'ph/mrPageReduceJSLoad' into 'master'

Reduces the bundle size of the merge request page

See merge request gitlab-org/gitlab!65759

app/assets/javascripts/commit/pipelines/pipelines_bundle.js

 import Vue from 'vue';
-import CommitPipelinesTable from './pipelines_table.vue';
 
 /**
  * Used in:
@@ -23,12 +22,15 @@ export default () => {
 
     if (pipelineTableViewEl.dataset.disableInitialization === undefined) {
       const table = new Vue({
+        components: {
+          CommitPipelinesTable: () => import('~/commit/pipelines/pipelines_table.vue'),
+        },
         provide: {
           artifactsEndpoint: pipelineTableViewEl.dataset.artifactsEndpoint,
           artifactsEndpointPlaceholder: pipelineTableViewEl.dataset.artifactsEndpointPlaceholder,
         },
         render(createElement) {
-          return createElement(CommitPipelinesTable, {
+          return createElement('commit-pipelines-table', {
             props: {
               endpoint: pipelineTableViewEl.dataset.endpoint,
               emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath,

app/assets/javascripts/issuable_context.js

@@ -9,19 +9,23 @@ export default class IssuableContext {
     this.userSelect = new UsersSelect(currentUser);
     this.reviewersSelect = new UsersSelect(currentUser, '.js-reviewer-search');
 
-    import(/* webpackChunkName: 'select2' */ 'select2/select2')
-      .then(() => {
-        // eslint-disable-next-line promise/no-nesting
-        loadCSSFile(gon.select2_css_path)
-          .then(() => {
-            $('select.select2').select2({
-              width: 'resolve',
-              dropdownAutoWidth: true,
-            });
-          })
-          .catch(() => {});
-      })
-      .catch(() => {});
+    const $select2 = $('select.select2');
+
+    if ($select2.length) {
+      import(/* webpackChunkName: 'select2' */ 'select2/select2')
+        .then(() => {
+          // eslint-disable-next-line promise/no-nesting
+          loadCSSFile(gon.select2_css_path)
+            .then(() => {
+              $select2.select2({
+                width: 'resolve',
+                dropdownAutoWidth: true,
+              });
+            })
+            .catch(() => {});
+        })
+        .catch(() => {});
+    }
 
     $('.issuable-sidebar .inline-update').on('change', 'select', function onClickSelect() {
       return $(this).submit();

app/assets/javascripts/merge_request.js

@@ -148,14 +148,6 @@ MergeRequest.prototype.initCommitMessageListeners = function () {
   });
 };
 
-MergeRequest.setStatusBoxToMerged = function () {
-  $('.detail-page-header .status-box')
-    .removeClass('status-box-open')
-    .addClass('status-box-mr-merged')
-    .find('span')
-    .text(__('Merged'));
-};
-
 MergeRequest.decreaseCounter = function (by = 1) {
   const $el = $('.js-merge-counter');
   const count = Math.max(parseInt($el.text().replace(/[^\d]/, ''), 10) - by, 0);

app/assets/javascripts/merge_request_tabs.js

@@ -3,9 +3,7 @@ import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import $ from 'jquery';
 import Cookies from 'js-cookie';
 import Vue from 'vue';
-import CommitPipelinesTable from '~/commit/pipelines/pipelines_table.vue';
 import createEventHub from '~/helpers/event_hub_factory';
-import initAddContextCommitsTriggers from './add_context_commits_modal';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import Diff from './diff';
 import createFlash from './flash';
@@ -341,8 +339,10 @@ export default class MergeRequestTabs {
         this.scrollToContainerElement('#commits');
 
         this.toggleLoading(false);
-        initAddContextCommitsTriggers();
+
+        return import('./add_context_commits_modal');
       })
+      .then((m) => m.default())
       .catch(() => {
         this.toggleLoading(false);
         createFlash({
@@ -356,13 +356,16 @@ export default class MergeRequestTabs {
     const { mrWidgetData } = gl;
 
     this.commitPipelinesTable = new Vue({
+      components: {
+        CommitPipelinesTable: () => import('~/commit/pipelines/pipelines_table.vue'),
+      },
       provide: {
         artifactsEndpoint: pipelineTableViewEl.dataset.artifactsEndpoint,
         artifactsEndpointPlaceholder: pipelineTableViewEl.dataset.artifactsEndpointPlaceholder,
         targetProjectFullPath: mrWidgetData?.target_project_full_path || '',
       },
       render(createElement) {
-        return createElement(CommitPipelinesTable, {
+        return createElement('commit-pipelines-table', {
           props: {
             endpoint: pipelineTableViewEl.dataset.endpoint,
             emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath,

app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue

@@ -412,7 +412,6 @@ export default {
             // If state is merged we should update the widget and stop the polling
             eventHub.$emit('MRWidgetUpdateRequested');
             eventHub.$emit('FetchActionsContent');
-            MergeRequest.setStatusBoxToMerged();
             MergeRequest.hideCloseButton();
             MergeRequest.decreaseCounter();
             stopPolling();