Reduces the bundle size of the merge request page

Lazy load the pipelines table as it will only be shown when the
user clicks on the pipelines tab.
Makes sure that the select2 library is only lazy loaded
when they are needed.

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,12 +9,15 @@ export default class IssuableContext {
     this.userSelect = new UsersSelect(currentUser);
     this.reviewersSelect = new UsersSelect(currentUser, '.js-reviewer-search');
 
+    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(() => {
-            $('select.select2').select2({
+              $select2.select2({
                 width: 'resolve',
                 dropdownAutoWidth: true,
               });
@@ -22,6 +25,7 @@ export default class IssuableContext {
             .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();