Merge branch '30151-fix-vue-production-warnings' into 'master'

Remove Vue from main bundle and disable production warnings

Closes #30151

See merge request !10458

app/assets/javascripts/boards/boards_bundle.js

@@ -38,6 +38,10 @@ $(() => {
 
   Store.create();
 
+  // hack to allow sidebar scripts like milestone_select manipulate the BoardsStore
+  gl.issueBoards.boardStoreIssueSet = (...args) => Vue.set(Store.detail.issue, ...args);
+  gl.issueBoards.boardStoreIssueDelete = (...args) => Vue.delete(Store.detail.issue, ...args);
+
   gl.IssueBoardsApp = new Vue({
     el: $boardApp,
     components: {

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

@@ -12,20 +12,18 @@ Vue.use(VueResource);
  * Renders Pipelines table in pipelines tab in the commits show view.
  */
 
+// export for use in merge_request_tabs.js (TODO: remove this hack)
+window.gl = window.gl || {};
+window.gl.CommitPipelinesTable = CommitPipelinesTable;
+
 $(() => {
-  window.gl = window.gl || {};
   gl.commits = gl.commits || {};
   gl.commits.pipelines = gl.commits.pipelines || {};
 
-  if (gl.commits.PipelinesTableBundle) {
-    document.querySelector('#commit-pipeline-table-view').removeChild(this.pipelinesTableBundle.$el);
-    gl.commits.PipelinesTableBundle.$destroy(true);
-  }
-
   const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
 
   if (pipelineTableViewEl && pipelineTableViewEl.dataset.disableInitialization === undefined) {
     gl.commits.pipelines.PipelinesTableBundle = new CommitPipelinesTable().$mount();
-    document.querySelector('#commit-pipeline-table-view').appendChild(gl.commits.pipelines.PipelinesTableBundle.$el);
+    pipelineTableViewEl.appendChild(gl.commits.pipelines.PipelinesTableBundle.$el);
   }
 });

app/assets/javascripts/merge_request_tabs.js

@@ -3,9 +3,6 @@
 /* global Flash */
 
 import Cookies from 'js-cookie';
-
-import CommitPipelinesTable from './commit/pipelines/pipelines_table';
-
 import './breakpoints';
 import './flash';
 
@@ -234,7 +231,7 @@ import './flash';
     }
 
     mountPipelinesView() {
-      this.commitPipelinesTable = new CommitPipelinesTable().$mount();
+      this.commitPipelinesTable = new gl.CommitPipelinesTable().$mount();
       // $mount(el) replaces the el with the new rendered component. We need it in order to mount
       // it everytime this tab is clicked - https://vuejs.org/v2/api/#vm-mount
       document.querySelector('#commit-pipeline-table-view')

app/assets/javascripts/milestone_select.js

@@ -2,8 +2,6 @@
 /* global Issuable */
 /* global ListMilestone */
 
-import Vue from 'vue';
-
 (function() {
   this.MilestoneSelect = (function() {
     function MilestoneSelect(currentProject, els) {
@@ -151,12 +149,12 @@ import Vue from 'vue';
               return $dropdown.closest('form').submit();
             } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
               if (selected.id !== -1) {
-                Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'milestone', new ListMilestone({
+                gl.issueBoards.boardStoreIssueSet('milestone', new ListMilestone({
                   id: selected.id,
                   title: selected.name
                 }));
               } else {
-                Vue.delete(gl.issueBoards.BoardsStore.detail.issue, 'milestone');
+                gl.issueBoards.boardStoreIssueDelete('milestone');
               }
 
               $dropdown.trigger('loading.gl.dropdown');

app/assets/javascripts/subscription.js

-import Vue from 'vue';
-
 (() => {
   class Subscription {
     constructor(containerElm) {
@@ -29,8 +27,7 @@ import Vue from 'vue';
 
         // hack to allow this to work with the issue boards Vue object
         if (document.querySelector('html').classList.contains('issue-boards-page')) {
-          Vue.set(
-            gl.issueBoards.BoardsStore.detail.issue,
+          gl.issueBoards.boardStoreIssueSet(
             'subscribed',
             !gl.issueBoards.BoardsStore.detail.issue.subscribed,
           );

app/assets/javascripts/users_select.js

@@ -2,8 +2,6 @@
 /* global Issuable */
 /* global ListUser */
 
-import Vue from 'vue';
-
 (function() {
   var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; },
     slice = [].slice;
@@ -74,7 +72,7 @@ import Vue from 'vue';
             e.preventDefault();
 
             if ($dropdown.hasClass('js-issue-board-sidebar')) {
-              Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'assignee', new ListUser({
+              gl.issueBoards.boardStoreIssueSet('assignee', new ListUser({
                 id: _this.currentUser.id,
                 username: _this.currentUser.username,
                 name: _this.currentUser.name,
@@ -225,14 +223,14 @@ import Vue from 'vue';
                 return $dropdown.closest('form').submit();
               } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
                 if (user.id) {
-                  Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'assignee', new ListUser({
+                  gl.issueBoards.boardStoreIssueSet('assignee', new ListUser({
                     id: user.id,
                     username: user.username,
                     name: user.name,
                     avatar_url: user.avatar_url
                   }));
                 } else {
-                  Vue.delete(gl.issueBoards.BoardsStore.detail.issue, 'assignee');
+                  gl.issueBoards.boardStoreIssueDelete('assignee');
                 }
 
                 updateIssueBoardsIssue();

spec/javascripts/merge_request_tabs_spec.js

 /* eslint-disable no-var, comma-dangle, object-shorthand */
 
 require('~/merge_request_tabs');
+require('~/commit/pipelines/pipelines_bundle.js');
 require('~/breakpoints');
 require('~/lib/utils/common_utils');
 require('~/diff');