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,13 +26,17 @@ export default () => {
     });
 
     if (pipelineTableViewEl.dataset.disableInitialization === undefined) {
-      const table = new CommitPipelinesTable({
-        propsData: {
-          endpoint: pipelineTableViewEl.dataset.endpoint,
-          helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
-          emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath,
-          errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath,
-          autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath,
+      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,26 +351,30 @@ export default class MergeRequestTabs {
 
   mountPipelinesView() {
     const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
-    const { CommitPipelinesTable, mrWidgetData } = gl;
-
-    this.commitPipelinesTable = new CommitPipelinesTable({
-      propsData: {
-        endpoint: pipelineTableViewEl.dataset.endpoint,
-        helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
-        emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath,
-        errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath,
-        autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath,
-        canCreatePipelineInTargetProject: Boolean(
-          mrWidgetData?.can_create_pipeline_in_target_project,
-        ),
-        sourceProjectFullPath: mrWidgetData?.source_project_full_path || '',
-        targetProjectFullPath: mrWidgetData?.target_project_full_path || '',
-        projectId: pipelineTableViewEl.dataset.projectId,
-        mergeRequestId: mrWidgetData ? mrWidgetData.iid : null,
-      },
+    const { mrWidgetData } = gl;
+
+    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,
+            errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath,
+            autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath,
+            canCreatePipelineInTargetProject: Boolean(
+              mrWidgetData?.can_create_pipeline_in_target_project,
+            ),
+            sourceProjectFullPath: mrWidgetData?.source_project_full_path || '',
+            targetProjectFullPath: mrWidgetData?.target_project_full_path || '',
+            projectId: pipelineTableViewEl.dataset.projectId,
+            mergeRequestId: mrWidgetData ? mrWidgetData.iid : null,
+          },
+        });
+      },
     }).$mount();
 
     // $mount(el) replaces the el with the new rendered component. We need it in order to 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', () => ({