Merge branch 'mrincon-instanciate-pipelines-table-correctly' into 'master'

Instantiate the Pipelines table in the commit page using a Vue render function

See merge request gitlab-org/gitlab!54239

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

 import Vue from 'vue';
-import commitPipelinesTable from './pipelines_table.vue';
+import CommitPipelinesTable from './pipelines_table.vue';
 
 /**
  * Used in:
@@ -8,14 +8,6 @@ import commitPipelinesTable from './pipelines_table.vue';
  *  - Merge Request details View > Pipelines Tab > Pipelines Table (projects:merge_requests:show)
  *  - New Merge Request View > Pipelines Tab > Pipelines Table (projects:merge_requests:creations:new)
  */
-
-const CommitPipelinesTable = Vue.extend(commitPipelinesTable);
-
-// export for use in merge_request_tabs.js (TODO: remove this hack when we understand how to load
-// vue.js in merge_request_tabs.js)
-window.gl = window.gl || {};
-window.gl.CommitPipelinesTable = CommitPipelinesTable;
-
 export default () => {
   const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
 
@@ -34,14 +26,18 @@ export default () => {
     });
 
     if (pipelineTableViewEl.dataset.disableInitialization === undefined) {
-      const table = new CommitPipelinesTable({
-        propsData: {
+      const table = new Vue({
+        render(createElement) {
+          return createElement(CommitPipelinesTable, {
+            props: {
               endpoint: pipelineTableViewEl.dataset.endpoint,
               helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
               emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath,
               errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath,
               autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath,
             },
+          });
+        },
       }).$mount();
       pipelineTableViewEl.appendChild(table.$el);
     }

app/assets/javascripts/merge_request_tabs.js

 /* eslint-disable no-new, class-methods-use-this */
-
 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';
@@ -350,10 +351,15 @@ export default class MergeRequestTabs {
 
   mountPipelinesView() {
     const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
-    const { CommitPipelinesTable, mrWidgetData } = gl;
+    const { mrWidgetData } = gl;
 
-    this.commitPipelinesTable = new CommitPipelinesTable({
-      propsData: {
+    this.commitPipelinesTable = new Vue({
+      provide: {
+        targetProjectFullPath: mrWidgetData?.target_project_full_path || '',
+      },
+      render(createElement) {
+        return createElement(CommitPipelinesTable, {
+          props: {
             endpoint: pipelineTableViewEl.dataset.endpoint,
             helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
             emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath,
@@ -367,8 +373,7 @@ export default class MergeRequestTabs {
             projectId: pipelineTableViewEl.dataset.projectId,
             mergeRequestId: mrWidgetData ? mrWidgetData.iid : null,
           },
-      provide: {
-        targetProjectFullPath: mrWidgetData?.target_project_full_path || '',
+        });
       },
     }).$mount();
 

spec/frontend/merge_request_tabs_spec.js

@@ -3,7 +3,6 @@ import $ from 'jquery';
 import initMrPage from 'helpers/init_vue_mr_page_helper';
 import axios from '~/lib/utils/axios_utils';
 import MergeRequestTabs from '~/merge_request_tabs';
-import '~/commit/pipelines/pipelines_bundle';
 import '~/lib/utils/common_utils';
 
 jest.mock('~/lib/utils/webpack', () => ({