1 files changed, 44 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/pipeline_tabs.js b/app/assets/javascripts/pipelines/pipeline_tabs.js
new file mode 100644
index 00000000000..ff88c6215e5
--- /dev/null
+++ b/app/assets/javascripts/pipelines/pipeline_tabs.js
@@ -0,0 +1,44 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import PipelineTabs from 'ee_else_ce/pipelines/components/pipeline_tabs.vue';
+import { reportToSentry } from './utils';
+
+Vue.use(VueApollo);
+
+const createPipelineTabs = (selector, apolloProvider) => {
+  const el = document.querySelector(selector);
+
+  if (!el) return;
+
+  const { dataset } = document.querySelector(selector);
+  const {
+    canGenerateCodequalityReports,
+    codequalityReportDownloadPath,
+    downloadablePathForReportType,
+    exposeSecurityDashboard,
+    exposeLicenseScanningData,
+  } = dataset;
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: selector,
+    components: {
+      PipelineTabs,
+    },
+    apolloProvider,
+    provide: {
+      canGenerateCodequalityReports: JSON.parse(canGenerateCodequalityReports),
+      codequalityReportDownloadPath,
+      downloadablePathForReportType,
+      exposeSecurityDashboard: JSON.parse(exposeSecurityDashboard),
+      exposeLicenseScanningData: JSON.parse(exposeLicenseScanningData),
+    },
+    errorCaptured(err, _vm, info) {
+      reportToSentry('pipeline_tabs', `error: ${err}, info: ${info}`);
+    },
+    render(createElement) {
+      return createElement(PipelineTabs);
+    },
+  });
+};
+
+export { createPipelineTabs };