Add latest changes from gitlab-org/gitlab@master

1 files changed, 23 insertions, 18 deletions

diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 251f1e0515a..4dab796d8a4 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -1,8 +1,9 @@
 /* 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